scss的用法、介绍

scss是sass3.0后的一个版本，后缀名为.scss

scss完全兼容所有版本的css，有着丰富的功能和特性

嵌套

scss允许CSS规则相互嵌套。内部规则只应用于外部规则的选择器。

注：相当于css的子代、后代选择器让复杂CSS布局更加简单。

.one{  
    .two{
        .three{}
    }
    .four{}
}

父选择器

.one{//& <==> .one
    &:hover{} // .one:hover
    two  & {} // two .one
    &-a{}   // .one-a
}

属性嵌套

.one{
    font:{  
        size: 14px; // <==> font-size
        weight: 700; // <==> font-weight
    }
}

变量 $

$color0:#000; // 全局变量
.one{
    $color1:#fff; // 局部变量
    $color2:red !global; // 转换成全局变量
    .two{ 
        color:$color2; //引用变量
    }
}

占位符 %

%link{}
@extend %link;

运算

SCSS 支持常见的基本数学运算，如加法、减法、乘法和除法。

（1）乘除法的优先级要高于加减法。

（2）小括号中的运算具有最高优先级。

$width: 100px;
$padding: 20px;
$base-size: 24px;
$line-height: 8px;
p {
    width: $width + $padding*2; // 140px  /*具有相同单位的数值相乘会报错*/
    height: $width/2; // 50px
    margin: round(10.5)px; // 四舍五入
    margin-left: 5px - (8px/2px); // 1px;
    font-size: 16px / 24px; //不执行除法操作，原样输出
    font-size: #{$base-size} / #{$line-height}; //使用插值语法之后，原样输出
    font-size: (16px / 24px); //使用括号包裹之后，执行除法操作
    font-size: $base-size / $line-height; //使用变量，执行除法操作
    opacity: random(4) / 5; //调用函数，执行除法操作
    padding-right: 2px / 4px + 3px; //使用算术操作符，执行除法操作
}

插值语句 #{}

可以在选择器和属性名中使用SassScript变量，使用#{}插值语法

$name: aaa;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}
/*
    被编译为：
*/
p.aaa {
  border-color: blue;
}

import

默认情况下，它会寻找 Scss 文件并直接引入， 但是，在以下几种情况下 它会被编译成 CSS 的 @import 规则：

i：如果文件的扩展名是 .css。

ii：如果文件名以 http:// 开头。

iii：如果文件名是 url()。

iv：如果 @import 包含了任何媒体查询（media queries）

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

如果上述情况都没有出现，并且扩展名是 .scss 或 .sass， 该文件就会被引入。  如果没有扩展名， 将试着找出具

有 .scss 或 .sass 扩展名的同名文件并将其引入。

//两者都将引入 foo.scss 文件
@import "foo.scss";
@import "foo";

如果你有一个 Scss 或 Sass 文件需要引入， 但是你又不希望它被编译为一个 CSS 文件， 这时，你就可以在文件

名前面加一个下划线，就能避免被编译。 这将告诉它不要编译成 CSS 文件。

@import "colors"; //如果有一个文件叫做 _colors.scss

如果需要也可以把他们包含在 CSS 规则 和 @media 规则中。

/*color.scss*/
.one {
  color: red;
}
/* use */
#main {
  @import "color";
}
/* 编译为 */
#main .one {
  color: red;
}

继承 extend

.parent{}
.child{
    @extend .parent;
}

混合 @mixin

@mixin  style1 { 
    color:#a00; 
}
@mixin  style2($c:#00a, $size:18px) { 
    color: $c; 
    font-size: $size;
}
.one{ 
    @include style1; 
}
.two{ 
    @include style2(#000); //省略则使用默认值
}

函数 @function

@function width($n){
    @return $n*2;
}
.one{
    width:width(5);
}

文章只有一些基础的scss用法记录，还有一些判断循环等未涉及。