Sass 중급 문법

github 주소: https://github.com/lily1010/sass/tree/master/course02

사용된 sass 구문은 다음과 같습니다.

sass --watch test.scss:test.css --style Compact --style Expanded

아래와 같습니다.

1 클래스 이름 중첩

test.scss의 내용은 다음과 같습니다.

<span style="color: #000000;">.test1 {
    font-size: .15rem;
    p{
        color: #333;
        .test11 {
            width: 3px;
        }
    }
}</span>

test.css에 컴파일된 내용은 다음과 같습니다.

<span style="color: #000000;">.test1 {
  font-size: .15rem;
}
.test1 p {
  color: #333;
}
.test1 p .test11 {
  width: 3px;
}</span>

2개 속성 중첩

test.scss의 내용은 다음과 같습니다.

<span style="color: #000000;">.test2 {
    margin: {
        left: 10px;
        right: 20px;
    }
}
.test21 {
    margin: 0 0 0 0{    /*命名空间也可以有自己的属性*/
        left: 10px;
        right: 20px;
    }
}</span>

test.css에 컴파일된 내용은 다음과 같습니다.

<span style="color: #000000;">.test2 {
  margin-left: 10px;
  margin-right: 20px;
}

.test21 {
  margin: 0 0 0 0;
  margin-left: 10px;
  margin-right: 20px;
}</span>

3 상위 선택자를 참조하여 상위 선택자의 위치를 ​​정확히 지정한 후 반전하여 상위 선택자가 됩니다.

test.scss의 내용은 다음과 같습니다.

<span style="color: #000000;">.a {
    font-size: .15rem;
    &:hover {           //引用父选择器
        color: red;
    }
    .ll {               //精确定位父选择器
       color: black;
        &:hover {
            height: 20px;
        }
    }
    .test3 & {          //反向成为父选择器
        width: 10px;
    }
}</span>

test.css에 컴파일된 내용은 다음과 같습니다.

<span style="color: #000000;">.a {
  font-size: .15rem;
}
.a:hover {
  color: red;
}
.a .ll {
  color: black;
}
.a .ll:hover {
  height: 20px;
}
.test3 .a {
  width: 10px;
}</span>

4개의 전역 변수

test.scss의 내용은 다음과 같습니다.

<span style="color: #000000;">/*方法一*/
$color: red;
.test4 {
    color: $color;
}
/*方法二*/
.test41 {
    $red: red !global;
    color: $red;
}
.test42 {
    color: $red;
}</span>

test.css에 컴파일된 내용은 다음과 같습니다.

<span style="color: #000000;">/*方法一*/
.test4 {
  color: red;
}

/*方法二*/
.test41 {
  color: red;
}

.test42 {
  color: red;
}</span>

5 인용된 문자열은 인용되지 않은 문자열로 컴파일됩니다.

test.scss의 내용은 다음과 같습니다.

<span style="color: #000000;">@mixin test5($left) {   //此处$不可去掉
    border-#{$left}:1px #000 solid;
    left: 20px;
    top: 10px;
}
.lili2 {
    @include test5("left");
}</span>

test.css에 컴파일된 내용은 다음과 같습니다.

<span style="color: #000000;">.lili2 {
  border-left: 1px #000 solid;
  left: 20px;
  top: 10px;
}</span>

6 분단에 대해 알아보기

test.scss의 내용은 다음과 같습니다.

<span style="color: #000000;">/*需要注意:Sass 数学函数在算术运算期间会保留单位
*可以将/解析为除法三种情况
*(1)如果该值，或值的任何部分，存储在一个变量中或通过函数返回。
* (2)如果该值是由括号括起来的，除非这些括号是在一个列表（list）外部，并且值是括号内部。
* (3)如果该值被用作另一个算术表达式的一部分。
*/
p {
    font-size: 10px/2px; // 原生的CSS，不作为除法 
    $width: 100px;
    width: $width/2;
    height: (100px/2);
    margin-left: 5px + 8px/2px;
}</span>

test.css에 컴파일된 내용은 다음과 같습니다.

<span style="color: #000000;">p {
  font-size: 10px/2px;
  width: 50px;
  height: 50px;
  margin-left: 9px;
}</span>

7색 연산

test.scss의 내용은 다음과 같습니다.

<span style="color: #000000;">.test7 {
    color: #302010 + #333333;
}
.test71 {
    color: #010101 * 2;
}
.test72 {
    color: rgba(0,0,0,0.3) + rgba(1,1,1,0.3); //必须具有相同的alpha值，才能进行颜色运算,但是alpha不变
}
/*如果想让alpha值变化,则需要计算函数*/
.test73 {
    color: opacify(rgba(0,0,0,0.3),0.3);
}</span>

test.css에 컴파일된 내용은 다음과 같습니다.

<span style="color: #000000;">.test7 {
  color: #635343;
}

.test71 {
  color: #020202;
}

.test72 {
  color: rgba(1, 1, 1, 0.3);
}

/*如果想让alpha值变化,则需要计算函数*/
.test73 {
  color: rgba(0, 0, 0, 0.6);
}</span>

8가지 문자열 연산

test.scss의 내용은 다음과 같습니다.

<span style="color: #000000;">.test8 {
    width: 2px + 3px;
}
.test81::after {    //带引号字符串和不带引号字符串,谁在前面就以谁为主
    font-family: "arial" + black;
    content: lala + "lili";
}
$value: 20;     //在字符串里面插入动态值
.test82::before {
    content: "wo ke yi #{$value} lili";
}</span>

test.css에 컴파일된 내용은 다음과 같습니다.

<span style="color: #000000;">.test8 {
  width: 5px;
}

.test81::after {
  font-family: "arialblack";
  content: lalalili;
}

.test82::before {
  content: "wo ke yi 20 lili";
}</span>

9개의 괄호는 우선순위를 높입니다

test.scss의 내용은 다음과 같습니다.

<span style="color: #000000;">.test9 {
    width: 1px + (2px * 3);
}</span>

test.css에 컴파일된 내용은 다음과 같습니다.

<span style="color: #000000;">.test9 {
  width: 7px;
}</span>

10 기본 변수 !default

test.scss의 내용은 다음과 같습니다.

<span style="color: #000000;">/*如果分配给变量的值后面添加了!default标志 ，这意味着该变量如果已经赋值，那么它不会被重新赋值，但是，如果它尚未赋值，那么它会被赋予新的给定值。*/
$color: red;
$color: pink !default;
.test10 {
    color: $color;
}</span>

test.css에 컴파일된 내용은 다음과 같습니다.

<span style="color: #000000;">.test10 {
  color: red;
}</span>