GithubHelp home page GithubHelp logo

sasscore's Introduction

#sassCore——也许是目前设计最好的sass库

目前sass库中应用最多的应该就是compassbourbon,但是使用之后会发现compass设计太复杂了,而bourbon有点太简单了。于是只好琢磨着去搞一个使用起来更方便合理的sass库,经过翻阅众多资料、实践及思考,终于有了现在的sassCore。

##sassCore特点:

  • sassCore涵盖范围广,目前涉及了setting,reset,mixin,css3,typography,media-queries,grid,helps八个基础部分及function和base这两个集成文件。
  • sassCore采用开关机制,对是否支持ie6/7等众多条件可以通过设置为true或false来搞定。
  • sassCore采用了sass 3.2.0版本以后的重大更新技术。如sass默认变量机制(默认变量!default,在应用的时候只需在你引入sassCore文件之前,重新申明变量就ok,而不需要去修改sassCore文件),placeholder选择器(有调用才会解析出相应的组合申明样式,避免了先前的class申明不管是否调用都会有样式解析出来)等。
  • sassCore借鉴优秀的作品,根据实战创造新的方法,紧跟前沿,每一个文件都是经过深思熟虑,几经更改的结晶。

##sassCore文件简略说明 ###setting 负责变量的文件,如常用的颜色,字体等变量。

###reset 负责重置的文件。其实这个重置包括两个部分,第一部分是normalize,第二部分是基于第一部分的一些重置,根据目前我们大家的使用习惯进行了一些归零行动,及设置文字字体及颜色,打印样式等。

###mixin 负责功能方面的文件。这里我们大概分成三个部分,一个是混合部分即mixin,一个是placeholder选择器部分即%,最后就是我们的function函数部分。我们常用的include及extend当然就是来自于这里了。

###grid 负责网格系统的文件。默认为流体布局,可以通过设置$_percentLayout为false来改成固定宽度(960px)居中布局,也可以通过设置$_span为true或false来控制是否输出各个网格的class。

###css3 负责css3属性前缀的文件。通过定义一个function,然后只需传递你的属性及需要的前缀就可以了,绝大部分来自bourbon

###media-queries 负责响应式宽度判断的文件。主要是对响应式布局的一些宽度判断,来自paranoida的sass-mediaqueries

###typography 负责文字排版的文件。这里主要考虑到文章详细页和其他页面的一些不同情况而给详细页加入了article这个class,里面的一些元素如ul,li,p给予一定的样式,而不是清零。

###helps 常用的几个class,可以根据自己的喜好定义。

###function 负责功能类的文件。这个文件引入了setting,css3,mixin,media-queries,grid,默认不产生任何样式,除非使用了里面的功能。有一种情况除外:如果grid中开启了$_span为true,那么会产生各个网格的class。

###base base文件引入了上面所有的基础文件,解析出来的样式包括重置样式,文字排版样式及helps样式。

##使用说明

如果是开始一个新项目,最好由设计公共样式的人引入base文件,然后再添加一些公有的样式,而其他开发人员则直接引入function文件即可。当然如果你已经有一份基础样式了,就可以直接调用function这个功能性文件,base就可以丢到一边去了。

sasscore's People

Contributors

marvin1023 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.