sass的简单知识

一. 1. 之前的sass中不需要{}, sass文件后缀名为".sass"    2. 现在的sass中需要{}, sass文件后缀名为".scss"    作用: less与sass的作用都是用于代码简化与重用的作用

    3. 创建sass文件的步骤:          - 在websotrm中建立一个File文件, 后缀名为".scss"          - 打开kaola 软件,把整个网页文件拖入kaola中,点击执行            编译,这样在webstorm中就自动生成后缀名为:".scss"            和".css"文件和".css.map"三个文件          - 不用管后缀名为".css.map"文件,我们主要使用到后缀名为            ".scss"和".css"文件

       编译: sass是从上往下加载的,sass文件在我们的编码过程中的每时每刻都在自动编译,所以            代码写完之后,我们刷新网页就会看到所做的效果;但webstorm            中,因为需要刷新,webstorm中的html或css文件才会变化,            所以在写完sass文件后,需要刷新webstorm,css中才能看到变化;            在html文件中,导入的是css文件,而不是sass文件;

       注意: koala不识别中文的路径,所以不要用中文命名文件名称.             若一个网页用sass写了一半后,之后写另一半时,同样的方式,             直接把整个文件路径拖入koala中,然后执行编译,就可以了继续             开工了.

二. 语法    1. 在sass中导入sass文件的方式: @import:"aaa" (可以不需要".scss"后缀名)    2. 在sass中导入css文件的方式: @import: "ccc.css" (必须加上".css"后缀名)    3. 在sass中单行注释: //;  多行注释:/**/

三. 变量    1. 符号为: $    2. 一个变量存一个值: $fontsize: 12px;    3. 一个变量存多个值:       $num: 2;       $num1: 1px 2px 3px 4px; (相当于一个数组有四个值)       $num2: 1px 2px, 3px 4px; (相当于2个数组,每个数组有两个值)

       使用: p{padding: $num1} ===> p{padding:1px 2px 3px 4px }

             p{margin: nth($num2,1)} ===>  p{margin:1px 2px }             nth(变量名,index) 函数,但这里的index是从1开始,1表示第一个数组             (即根据下标值,获取某一个元素(数组)的值,下标值从1开始)    4. 当变量与选择器或者字符串(px)或者属性等不是变量的东西相结合时,需要用       #{}来讲变量括起来,这样才能使变量与其他内容拼接起来.       如: p { width: #{$num}px; } ===> p{ width: 2px }

四. default的使用(less中没有该方法)   作用: 在源码中使用default,是便于别人在引入该源码时方便对这个变量的值进行改动         如源码中使用了如下语句:　$color: blue !default; 那么当别人想要更改         $color这个变量的值为 red 时,只需要重新设定$color: red; 这样就覆盖了         $color之前的值. 这两条语句的位置没有限制谁先谁后.

五. 嵌套    1. 元素的嵌套       div{           width:100px;           p{              font-size: 12px;              a{                 color: red;                 &:hover{                   color: blue;                 }              }           }       }       说明: 这里在div中嵌套了一个p元素,在p元素中嵌套了一个a元素             嵌套了a元素的hover属性,这里注意: 必须是"&:hover{...}"             这样才能在sass中正确的设置hover属性

    2. 属性嵌套       div{          border:{             top: 1px solid red;             bottom: 1px solid yellow;             style: {               top: 1px solid blue;             }          }       }       说明: 在div中设置border属性,border属性中嵌套了border-top属性,             border-bottom属性,嵌套了border-style属性,在border-style属性             中又嵌套了border-style-top属性.

    3.  关键字:@at-root  嵌套时,使元素跳出其的根元素       div{         width:100px;         p{            font-size: 12px;            @at-root span{               color: red;            }         }       }       说明: p元素是div的儿子元素,而span元素是跳出div元素的一个独立的元素.

    注意: 虽然嵌套有它的作用所在,但我们在编码过程中,应减少这样嵌套的复合元素的    编码.因为浏览器解析css的选择器时,是从右往左解析的,如果嵌套太多,那么性能会    有所降低.

六. 函数(概念---举例)  1. 混合函数(多个参数);     定义的关键字: @mixin; 引用时的关键字: @include     定义语句须放在引用语句的前面

     定义: @mixin whb($w,$h,$b){            width:$w;            height:$h;            border:$b          }

     引用一: div{               @include whb(10px,20px,1px solid red);            }     引用二: div{               @include whb(auto,20px,1px solid red);            }     注意: 若传入实参时,给div的width传入的参数为"auto",那么div     会填充其父元素的宽度,即100%.

  2.混合函数(一个参数)    定义: @mixin radius($r){             border-radius:$r;         }    引用: div{             @include radius(2px);         }

  3.混合函数(只有一个参数,给定默认值)    定义: @mixin color($col:red){            color: $col;         }    引用一: p{             @include color(yellow); //css中颜色为yellow           }

    引用二: p{             @inclue color(); //css中颜色为red           }

     说明: 在定义中,给这个函数的参数给定了一个默认值为"red",     在引用一中传入了参数为"yellow",那么p元素的color为yellow;     而在引用二中没有传入参数,那么p元素的color为函数定义的默认值     ,即"red".这就是默认值的引用;     但注意,一般情况下,若函数只有一个参数时,可以给其设定默认值,     若函数有多个参数时就不要设定默认值了,因为这样可能会出错.

七. 继承 引用时的关键字: @extend    举例    .mydiv{              width:100px;              height:100px;              border:1px solid red;           }           .div_1{              @extend mydiv; //这样就继承了mydiv的css样式              color: red; //还可以写自己的样式           }    有时候我们只是需要一个元素来定义样式以供其他元素来使用,这时候我们就需要    把用来定义方式的元素隐藏,关键字为"%",在被隐藏的元素前面加一个"%":    举例:  %mydiv{             width:100px;             height:100px;             border:1px solid red;          }          .div_1{             @extend %mydiv; //这样就继承了mydiv的样式,同时也把mydiv隐藏了          }

八. 继承与混合的相同与不同点   相同点: 继承与混合都是用于代码能够被重用的功能   不同点: 若重用时没有参数,则使用继承; 若有参数则使用混合函数

九. 循环的使用   若包含最后一个数据用through;若不包含,则使用to   1. from...through...(包含最后一个数)      p{         for $i from 1 through 5{             h#{$i} {                 font-size: #{$i}px;             }         }      }     说明: 在p元素下嵌入了5个元素,并给这五个元素设置了font-size,如下:           h1{font-size: 1px}           h2{font-size:2px}           h3{font-size:3px}           h4{font-size:4px}           h5{font-size:5px}    注意: 在选择器或属性值或属性中嵌入变量时,需写成#{$变量名}这种形式.

   2. from...to...(不包含最后一个数)      @for $i from 1 to 5{         .a#{$i} {             font-size: #{$i}px;         }      }

     说明: 循环设置了四个元素,并给这四个元素设置了font-size,如下:           .a1{font-size: 1px}           .a2font-size:2px}           .a3{font-size:3px}           .a4{font-size:4px}

十. 键值对(举例说明)   定义一个键值对: $my_map:(a1:1px,a2:2px,a3:3px);   引用: @each $key,$value in $my_map{             .#{$key} {                 width: $value;             }        }        这样定义之后,在css中的样式为:        .a1{ width:1px }        .a2{ width:2px }        .a3{ width:3px }