Sass/Scss入门讲解

一直想学Sass/Scss，于是花了两天时间算是手抄了一份官方文档，里面覆盖了大部分的Sass语法，同时关于@extend加入了一些自己的理解

Scss其实是更高版本的Sass，相比于Sass它有以下几点改动：

更接近与css的书写方式 对css3的兼容性更好了 Sass以缩进和空格代替花括号，Scss基本和CSS的书写方式一样

所有的例子都已经测试过，以下例子都是采用Scss

CSS 扫盲

单位

绝对单位

in (英寸) mm (毫米) cm (厘米) pt (点，1点 = 1/72in) pc (皮卡，1pc = 12点) 相对单位

px (像素) em (元素大小) % (元素百分比) ex (字体的 x-height)

CSS 拓展

嵌套

    (1)内层以外层作为父选择器    
    #p p{
        color:#fff
        font:15px;
        img{
            width:20px;
        }
    }

    =>

    #p p{
        color:#fff
        font:15px;
    }
    #p p img{
        width:20px;
    }

    (2)直接使用父选择器 &
    #p .cls{
        p {
            width: 20px;
        }
        & {
            font-size: 20px;
        }
    }

    =>

    #p .cls p {
        width: 20px;
    }
    #p .cls {
        font-size: 20px;
    }

    (3)属性嵌套
    #p p{
        font: {
            family:microsoft;
            size:20px;
        }
    }

    =>

    #p p {
        font-family: 'microsoft';
        font-size: 20px;
    }

注释

/**/多行以及，//单行注释（前者会被编译，后者不会）

语法

变量

全局变量

$width: 20px;
#p p{
    width: $width;
}

=>

#p p {
    width: 20px;
}

局部变量(内部定义的规则外部无法使用)

   #p p{
        $pwdth: 50rem;
        width: $pwdth;
   }

   =>

   #p p {
        width: 60rem;
   }

局部规则里定义局部变量，衍生为全局变量让外部可以使用,注意!global的位置

   #p p{
        $pwdth: 60rem !global;
        width: $pwdth;
    }
    span{
        width:$pwdth;
    }

=>

    #p p {
        width: 60rem;
    }
    span {
        width: 60rem;
    }

数据类型

数字

1,2,3,20px 字符串 (有引号或者无引号) 颜色

blue,#fff,rgba(0,1,2,0.3) 布尔值

true,false 数组

用逗号或者空格作为分割符 1px 2px,20rem map

类似于js的object

(key1: value1, key2: value2)

运算

+、-、*、/、% (运算过程中会自动换算)

#p{
    width: 20pc + 12in;
}

=>

#p {
    width: 92pc;//20 + 72 pc
}

关系运算符

#p{
    $bool:20px > 20pt;
    display: $bool;
}

=>

#p {
    display: false;
}

除法运算

以下三种情况 / 将被视为除法运算符号：

如果值，或值的一部分，是变量或者函数的返回值 如果值被圆括号包裹

如果值是算数表达式的一部分

#p p{
    width: 10px / 9px; /*没有进行除法运算*/
    height: (10px) / 9; /*值被括号包裹，进行了除法运算*/
    $c:500px;
    left:$c / 20; /*值是变量，进行了除法运算*/
    top: round(2.3px); /*值是一个函数的返回值，进行了除法运算*/
    right: 2px + 3px / 2; /*存在一个表达式，进行了除法运算*/
}

=>

#p p {
    width: 10px / 9px;
    /*没有进行除法运算*/
    height: 1.11111px;
    /*值被括号包裹，进行了除法运算*/
    left: 25px;
    /*值是变量*/
    top: 2px;
    /*值是一个函数的返回值*/
    right: 3.5px;
    /*存在一个表达式*/
}

颜色值运算

颜色值相加(对应的两位一组分别相加)

p {
    color: #020102 + #080808;
}

=>

p {
    color: #0a090a;
}                               

颜色值相乘(对应的每两位相乘)

p {
    color: #020102 + #080808;
    background-color: #020102*2;
}

=>

p {
    color: #020102 + #080808;
    background-color: #040204;
}

如果含有alpha，那么只有透明度相同的时候，颜色值才能运算

颜色的透明度运算

opacify (增加透明度的值)

transparentize (减少透明度的值)

p {
    $col:rgba(2,100,255,0.7);
    color: opacify($col,0.1);
    background-color:transparentize($col,0.2);
}

=>

p {
    color: rgba(2, 100, 255, 0.8);
    background-color: rgba(2, 100, 255, 0.5);
}

字符串连接

左边不带引号，连接之后不带

左侧带引号，连接之后带

p{
    content: "FOO" + "BAR";
    content: foo + "BAR";
}

=>

p {
    content: "FOOBAR";
    content: fooBAR;
}

插值#{$}

插值用来属性名中使用变量也就是在选择器上或者冒号前边直接使用

$insert:foo;
    p ##{$insert}{
        #{$insert}-color:white;  
}

=>

p #foo {
    foo-color: white;
}

插值也可以直接用在属性值中，用来避免直接发生运算

@规则

@import

可以导入scss/sass,导入的结果是编译合并成一个css

@ import "test" / @import "test.scss"

=>

导入test.scss 

但是在以下情况时，不会导入scss文件

文件的后缀名是css 文件名以https://开头 文件名是url() @import 含有媒体查询

如果在导入的过程中不希望被编译成css,那么可以将文件名前面加下划线，再@import导入,但是你导入的时候没有必要加下划线

@extend(我的理解就是完全复制一份父级元素的规则，然后将父级元素的选择符号，用子级元素的选择符号进行替换，然后和自己元素特有的属性合并)

继承

.foo{
    color: red;
}
#id{
    @extend .foo;
    font: 20px;
}

=>

.foo, #id {
    color: red;
}
#id {
    font: 20px;
}    

小Tips(继承作用于所有的父级元素的子元素)

.foo{
    color: red;
}
.foo a{
    text-decoration: none;
}
#id{
    @extend .foo;
    font: 20px;
}

=>

.foo, #id {
    color: red;
}
.foo a, #id a {
    text-decoration: none;
}
#id {
    font: 20px;
}

多重继承(这是我编的，类似于多重继承的概念)

.p1{
    font-size: 20px;
}
.p1{
    background-color: rebeccapurple;
}
.ex2{
    @extend .p1;
    @extend .p1;
    color: red;
}


=>

//注意，如果含有相同的属性，后继承的属性会覆盖前一个继承的属性
.p1, .ex2 {
    font-size: 20px;
}

.p1, .ex2 {
    background-color: rebeccapurple;
}

.ex2 {
color: red;
}

连续继承(也是我编的)

.p2{
    color: red;
}
.p2{
    @extend .p2;
    background-color:beige; 
}
.ex2{
    @extend .p2;
    font-size: 20rem;
}

=>

.p2, .p2, .ex2 {
    color: red;
}

.p2, .ex2 {
    background-color: beige;
}

.ex2 {
    font-size: 20rem;
}

设置某个类只能被继承，不能独自使用

/*某个规则只能被继承不能被直接使用*/

%p3{
    color: red;
}
.p3{
    @extend %p3;
}

=>

.p3 {
    color: red;
}

语句

if 语句(可以 @if 和 @else if 混合使用)

p{
    @if 1==2 {
        color: red;
    }
    @else if 1==1{
        background-color: blue;
    }
    @else if 3==2{
        font-size: 20px;
    }
}

=>

p {
    background-color: blue;
}

for 语句(按数量渲染列表)

@for var form <-start-> to <-end-> //只包含start不包含end

/*for循环*/

$va:1;
@for $va from $va through 3{
    .pt#{$va}{
        width: $va*200;
    }
}

=>

.pt1 {
    width: 200;
}

.pt2 {
    width: 400;
}

.pt3 {
    width: 600;
}

@each 语句 (按数组值内容渲染)

@each $var in <-array->

@each $animal in (bird,dog,cat){
    p{
        content: $animal;
    }
}

=>

p {
    content: bird;
}

p {
    content: dog;
}

p {
    content: cat;
}

多个变量

@each $animal, $color, $font-size in (bird,red,20px), (dog,blue,30px){
    p{
        content: $animal;
        color: $color;
        font: $font-size;
    }
}

=>

p {
    content: bird;
    color: red;
    font: 20px;
}

p {
    content: dog;
    color: blue;
    font: 30px;
}

其他，用得着的时候再写吧