码迷,mamicode.com
首页 > 其他好文 > 详细

sass的基础认识

时间:2016-04-05 22:39:25      阅读:256      评论:0      收藏:0      [点我收藏+]

标签:

    sass的语法运用

     1.语法

    sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号;另一种就是我们这里使用的scss文件,这种和我们平时写的css文件格式差不多,使用大括号和分号。而本教程中所说的所有sass文件都指后缀名为scss的文件。

    //文件后缀名为sass的语法

        body

        background: #eee

        font-size:12px

        p

        background: #0982c1



        //文件后缀名为scss的语法  

        body {

        background: #eee;

        font-size:12px;

        }

        p{

        background: #0982c1;

        } 

     sass的导入(@import)规则和CSS的有所不同,编译时会将@import的scss文件合并进来只生成一个CSS文件。但是如果你在sass文件中导入css文件如@import ‘reset.css‘,那效果跟普通CSS导入样式文件一样,导入的css文件不会合并到编译后的文件中,而是以@import方式存在。

 

     所有的sass导入文件都可以忽略后缀名.scss。一般来说基础的文件命名方法以_开头,如_mixin.scss。这种文件在导入的时候可以不写下划线,可写成@import "mixin"。

     2.变量

     sass的变量必须是$开头,后面紧跟变量名,而变量值和变量名之间就需要使用冒号(:)分隔开(就像CSS属性设置一样),如果值后面加上!default则表示默认值。

       普通变量

       定义之后可以在全局范围内使用

       默认变量

       sass的默认变量仅需要在值后面加上!default即可

       特殊变量

       一般我们定义的变量都为属性值,可直接使用,但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。

       多值变量

       多值变量分为list类型和map类型,简单来说list类型有点像js中的数组,而map类型有点像js中的对象。

 

       list

       list数据可通过空格,逗号或小括号分隔多个值,可用nth($var,$index)取值。关于list数据操作还有很多其他函数如length($list),join($list1,$list2,[$separator]),append($list,$value,[$separator])等,具体可参考sass Functions(搜索List Functions即可)

       多值变量分为list类型和map类型,简单来说list类型有点像js中的数组,而map类型有点像js中的对象。

       map

       map数据以key和value成对出现,其中value又可以是list。格式为:$map: (key1: value1, key2: value2, key3: value3);。可通过map-get($map,$key)取值。关于map数据还有很多其他函数如map-merge($map1,$map2),map-keys($map),map-values($map)

    

       全局变量

       在变量值后面加上!global即为全局变量。这个目前还用不上,不过将会在sass 3.4后的版本中正式应用。目前的sass变量范围饱受诟病,所以才有了这个全局变量。

    

       混合(mixin)

       sass中使用@mixin声明混合,可以传递参数,参数名以$符号开始,多个参数以逗号分开,也可以给参数设置默认值。声明的@mixin通过@include来调用。

       多个参数mixin

       调用时可直接传入值,如@include传入参数的个数小于@mixin定义参数的个数,则按照顺序表示,后面不足的使用默认值,如不足的没有默认值则报错。除此之外还可以选择性的传入参数,使用参数名与值同时传入。

       多组值参数mixin

       如果一个参数可以有多组值,如box-shadow、transition等,那么参数则需要在变量后加三个点表示,如$variables...。

sass的基础认识

标签:

原文地址:http://www.cnblogs.com/tangqi/p/5357023.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!