scss基本语法

SCSS（Sassy CSS）是sass延伸版本，其语法和结构更加接近css，更容易让前端程序员接受。

1. 变量

• 变量的声明

和php变量声明类似,以美元符合$开头,后跟变量名,变量赋值用冒号:，:右边为值，以分号;结束

/* $变量名: 值; */
$width: 110px; /* 普通变量 */
$height: 120px !default; /* 默认变量 */
$base-wdith: $width; /* 变量嵌套 */

• 变量的使用

$width: 110px; 
.class{
    width: $width; /* width值为 110px */
}

• 全局变量与局部变量

$color: black; /* 全局变量 */
.class-1{
    $color: red; /* 局部变量 只在.class-1中生效 */
    color: $color; /* 值为red */
}
.class-2{
    color: $color; /* 值为black */
}

2. 选择器嵌套

• 选择器嵌套

.class-1{
    width: 100px;
    .class-2{
        width: 50px;
    }
    div{
        width: 50px;
    }
}

• 属性嵌套

.class-1{
    margin{
        top: 40px;
        letf: 20px;
    }
}

• 伪类嵌套

/* &指向本身 */
.class-1{
    &:before,
    &:after {
        content:"";
        display: table;
    }
    &:nth-child(2n){
        dispaly:none;
    }
}

3. mixin 混入

• 声明使用

/* 声明 */ 
@mixin style1{
    width: 100px;
    height: 100px;
    backgroung: blue;
}
/* 使用 */
.c1{
    @include style1; /* 导入了style1中的样式 */
}

• 参数

/* 类似函数传参 */ 
@mixin style2($color){
    color: $color;
}
.c2{
    @include style2(#fff); 
}
/* 带默认值 */ 
@mixin style3($radius: 5px){
    border-radius: $radius;
}
.c3{
    @include style3; 
}

• 多个参数

@mixin style4($width,$height){
    width: $width;
    height: $height;
}
.c4{
    @include style4(100px,100px); 
}

/* 特别参数“…” */
@mixin box-shadow($shadows...){
  @if length($shadows) >= 1 {
    -webkit-box-shadow: $shadows;
    box-shadow: $shadows;
  } @else {
    $shadows: 0 0 2px rgba(#000,.25);
    -webkit-box-shadow: $shadow;
    box-shadow: $shadow;
  }
}

.box {
  @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
}

4. 继承 @extend

.class-1{
    background: skyblud;
    border-radius: 50%;
}
.class-2{
    width: 200px;
    height: 200px;
    @extend .class-1; // 继承了.class-1中的属性
}

5. 占位符 %

• 使用占位符%定义的代码块，在其他地方没有继承使用的情况下，是不会编译为css代码的

%style1{
    text-indent: 2em;
}

• 使用和继承一样

%style2{
    text-indent: 2em;
}
.class-1{
    @extend %style2;
}

6. 数据类型

• 数字: 如，1、 2、 13、 10px、100%；
• 字符串：有引号字符串或无引号字符串，如，”foo”、 ‘bar’、 baz；
• 颜色：如，blue、 #04a3f9、 rgba(255,0,0,0.5)；
• 布尔型：如，true、 false；
• 空值：如，null；

• 值列表：用空格或者逗号分开，如，1.5em 1em 0 2em 、 Helvetica, Arial, - sans-serif。

  7. 注释

• // 用此符号添加的注释，不会出现在编译后的css中

• /* */ 用此符号添加的注释，会被添加到编译后的css中

  8. 计算

• 加减乘除

.class-1{
    width: 100px + 100px; // 200px
    heigth: 300px - 100px; // 200px
    border-radius: 5px * 2; // 10px
    margin-left: 100px / 10; // 10px
}