Sass의 기본 자세

SASS란 무엇인가요

기존 CSS는 간단한 설명 스타일 파일이지만 SASS는 CSS를 미리 컴파일할 수 있습니다. 변수, 함수, 상속과 같은 동적 언어 기능은 SASS 소스 코드에서 사용할 수 있으며 CSS 파일로 컴파일할 수 있습니다.

설치 및 사용

설치

Sass는 Ruby로 작성되었기 때문에 Sass를 사용하려면 Ruby 환경을 설치해야 합니다. 그런 다음 gem을 사용하여 sass를 설치하십시오. 다음 명령을 입력하여 sass를 설치하십시오:

gem install sass

sass -v 명령을 사용하여 sass 버전을 확인할 수 있습니다.

을 사용하여 접미사가 .scss인 새 소스 코드 파일을 만든 다음 Sass 소스 코드를 편집할 수 있습니다. 그런 다음 다음 명령을 사용하여 소스 코드 파일을 CSS로 컴파일하고 변환하여 화면에 표시합니다.

sass test.scss

또한 파일 이름 끝에 .css 접미사를 추가하여 현재 디렉터리에 CSS 파일을 생성할 수도 있습니다. 다음과 같습니다:

sass test.scss test.css

참고: .sass와 .scss의 차이점은 .sass 파일에는 코드 레이아웃에 대한 매우 엄격한 요구 사항이 있다는 것입니다. 중괄호나 세미콜론이 없습니다.

명령 매개변수

--style: 컴파일 스타일 Sass는 네 가지 컴파일 스타일 옵션을 제공합니다.

nested: 중첩된 들여쓰기 CSS 코드(기본값).

expanded: 들여쓰기되지 않은 확장된 CSS 코드입니다.

compact: 간결한 형식의 CSS 코드입니다.

압축: 압축된 CSS 코드입니다.

예:

sass test.scss test.css --style 압축

--watch: 파일 변경 사항 모니터링 sass는 소스 파일 변경 사항을 모니터링하고 자동으로 컴파일된 파일을 생성할 수 있습니다. 버전. 예

//监听单个文件sass --watch test.scss:test.css
//监听目录sass --watch sassFileDirectory:cssFileDirectory

변수

SASS는 $를 사용하여 변수를 정의합니다.

$white:#FFFFFF;body{   
 color: $white;
}

문자열에 변수를 삽입해야 하는 경우 변수를 다음과 같이 작성해야 합니다. #{}

$imgUrl:"../img/test.png";body{ 
   background-image: url(#{$imgUrl});
}

작업

SASS를 사용하면 코드에서 계산을 사용할 수 있습니다.

$min-left:10px;body{   
 margin-left:$min-left+20px;
}

중첩

SASS는 중첩 규칙을 허용합니다

div{
    //选择器嵌套
    p{
        color:#FFFFFF;
    }
    //属性嵌套
    margin:{
        left:10px;
    }
    //伪类嵌套
    &:hover{
        color:#F4F4F4;
    }
}

은 CSS 스타일로 컴파일됩니다.

div {
  margin-left: 10px;
}
div p {
  color: #FFFFFF;
}
div:hover {
    color: #F4F4F4;
}

상속됨

SASS는 @extend를 사용하여 다른 선택기에서 상속할 수 있습니다.

.page{
    background-color:#F7F7F7;
}
.div1{
    @extend .page;
    color:#FFFFFF;
}

Mixin

SASS提供Mixin类似“函数”的重用代码块。 使用@mixin定义样式代码块，然后使用@include调用该样式。 不同于@extend的是Mixin定义样式不会编译输出在CSS样式中，并且可以指定参数和默认值。

//不带参数的mixin
@mixin page{
    background-color:#F7F7F7;
}
//带参数的mixin
@mixin setDefMargin($left, $right, $bottom: 10px,$top: 10px){
    margin:$top $right $bottom $left;
}
.test{
    @include page;
    @include setDefMargin(20px,30px);
    color:#FFFFFF;
}

需要注意的是，必须先定义没有默认值的参数，后指定有默认值的参数。

Import

sass可以使用@import语句，来引用指定的外部文件。

//引入scss文件
@import "variable.scss";
//引入css样式文件
@import "style.css";

条件语句

使用@if和@else语句可以用来做条件判断

$min-margin: 10px;
@mixin init-margin($left){
    //判断传入的参数是否大于最小值
    @if $left > $min-margin {
        margin-left: $left;
    } @else {
        margin-left: $min-margin;
    }
}
body {
    @include init-margin(5px);
}

循环语句

FOR循环

使用@for来定义循环体。 $i表示循环变量，from 后面跟上开始数值，to后面跟结束数值。

@for $i from 1 to 20 {
    .page-index#{$i} {
        color: #FFFFFF;
    }
}

WHILE循环

使用@while定义循环体，后面跟循环条件

//循环变量
$i: 2;
@while $i<10{
    page-index#{$i} {
        color: #F4F4F4;
    }
    $i=$i=1;
}

自定义函数

使用@function语句可以自定义函数，@return表示函数的返回值

@function calcNumber($num) {
    @return $num+10;
}body {    margin-left: calcNumber(20px);
}