단 몇 마디로 Sass를 시작해보세요

배경:

처음으로 회사 프로젝트를 맡게 되었습니다. 이전에 Sass에 대한 기본 지식을 간략하게 읽었지만 오랫동안 작업하지 않았기 때문에 지식이 바람에 흩어졌습니다. 그것을 검토하고 상식의 몇 가지 핵심 사항을 적어 보겠습니다. . Sass는 Ruby로 작성되었으므로 사용하기 전에 컴퓨터에 Ruby 개발 환경이 있는지 확인하세요. cmd에서 ruby -v 명령을 사용하여 현재 Ruby 버전을 확인하세요.

소개 및 개요:

 Sass는 CSS용 전처리 도구입니다. CSS 코드가 크면 개발을 단순화하고 후속 유지 관리를 용이하게 할 수 있습니다. 전처리 도구란 무엇입니까? 실제 CSS 코드 를 생성하기 전에 수행해야 하는 작업입니다. 이는 CSS 작성 효율성을 향상시키기 위해 몇 가지 고급 언어 기능을 통합하고 있으며 Sass도 지원합니다. CSS3.

 C 언어의 전처리를 기억하시나요? C 언어에는 다양한 유형의 전처리가 있으며 그 중 가장 잘 알려지지 않은 것은 "매크로 정의"입니다. 매크로 정의의 기능은 미리 설정된 상수를 정의한 다음 이 상수를 사용하여 이 상수가 있는 코드의 모든 부분을 전처리하는 것입니다. #define A 5와 같이 설정된 값을 대체하는데 이는 다음 코드에 나타나는 A를 모두 5로 직접 대체한다는 의미이며, 이러한 작업은 코드가 컴파일되기 전에 수행되어야 하므로 매크로 정의가 수행되어야 합니다. 전처리의 일종이다.

위에서 설명한 내용으로 돌아가서, 컴파일 및 분석을 수행하려면 먼저 css라는 파일 접미사가 있는 파일에 CSS 코드를 작성해야 한다는 것을 알고 있습니다. sass는 사전 컴파일된 도구이므로 sass를 사용하는 것이 가능합니다. CSS 이전에는 확실히 그렇습니다. sass를 작성하는 데 가장 일반적으로 사용되는 두 가지 방법은 서로 다른 접미사 sass 및 scss에 해당합니다. Ruby 및 Python과 같이 공백을 언어 구문의 일부로 사용하며 후자는 CSS에서 가장 일반적인 중괄호를 구문 지원으로 사용합니다. 코드는 다음과 같습니다

<code>sass写法: 使用空格作为语法的一部分，本应该是一个空格的地方若出现两个空格则语法报错,且不需要分号结尾    
div     
 width:100px   
 height:100px

scss写法：一如我们写css一般
div{
    width:100px;   
    height:100px;
}   <br>
</code>

동일한 파일에서 두 구문을 혼합할 수 없지만 도구를 사용하여 서로 변환할 수 있다는 점에 유의해야 합니다.

공통적인 팁:

1. 클래스 이름 중첩

<code>css代码：   
.div1 .div2{
    background-color:red;
}

sass代码：
.div1{
    .div2{
        background-color:red;
    }
}   
可以看到sass使类名的嵌套更加清晰，类名的权重也会一目了然    
</code>

2. 변수

<code>使用$定义一个变量
$mainColor:red;

css写法：  
.div1 .div2{
    background-color:red;
}

sass写法：
 .div1{
    .div2{
        background-color:$mainColor;
    }
} 
更加方便维护和修改
</code>

3. 의사 클래스/의사 요소 작성 방법

<code>这个写法我当时猛的一看，确实不知道，还纳闷为什么这样用，后来一查资料，原来只是伪元素的写法而已   

css写法：   
.clearfix::before{
    content:"";
    ...
}

sass写法：
.clearfix{
    &:before{  //&称为父元素选择器，如果不加则代表选中.clearfix类下所有的元素
        content:"";
        ...
    }
}<br>
</code>

여기서 주목해야 할 작은 점은 의사 클래스와 의사 요소의 차이점입니다. 의사 요소는 CSS3에만 나타나는 개념으로, 두 개의::로 표현되는 의사 클래스는 특정 항목에 특수 효과를 추가하기 위한 것입니다. selectors. 및 의사 요소는 특정 선택자에 특정 특수 효과를 추가하기 위한 것입니다. 링크, 방문, 호버 및 활성과 같은 일반적인 의사 클래스는 여기서 언급할 가치가 있습니다. 네 개의 의사 클래스가 동시에 나타나서 사용되길 원할 때, 그들의 쓰기 순서는 내 순서와 일치해야 합니다. 그렇지 않으면 어떻게 기억할 수 있습니까? LV백이라고 들어보셨나요? 그 사람 괜찮아요? 음! lvha. . 첫 글자로 단어 전체를 기억하세요. 말할 필요도 없이, after, before, first-letter, first-line 등과 같이 흔히 사용되는 의사 요소가 있으므로 모두가 두 가지 사항을 알아야 합니다: 첫째, 세미콜론을 여러 개 쓸 때, 둘째, 여러 개의 의사 요소를 사용할 때 -수업 동시 주문 문제입니다.

4. 코드 재사용을 위한 상속

이것을 보면 위에서 쓴 두 번째 사항을 생각해야 합니다. 변수의 정의는 특정 값의 재사용을 위한 것입니다. 큰 코드 부분을 재사용하려면 어떻게 해야 할까요? 지금 소개할 상속을 이용하시면 됩니다. Sass의 상속에는 @mixin/@include와 @extend라는 두 쌍의 키워드가 있습니다. 둘의 작동 원리도 매우 다릅니다. @mixin은 코드를 정의하는 것이고 @include는 코드를 정의하는 것입니다. 간략한 소개와 @extend는 현재 정의된 클래스 스타일을 소개하는 것입니다. C 언어에 익숙한 학생들은 include가 C 언어의 매크로 정의 유형이라는 것을 알고 있으므로 여기서는 코드 복사와 동일합니다. 우리의 sass는 이 키워드를 구문 분석하고 @mixin의 코드를 직접 복사하며, @extend가 클래스에 나타나면 현재 클래스 이름을 상속할 클래스 이름, 즉 예에서 병치합니다. b의 이름 a에 나타나며 최종 효과는 .a, .b입니다. 즉, 클래스 a와 클래스 b가 이 속성을 갖습니다. 상속은 객체 지향 개념입니다. @extned 키워드는 Sass에서 사용됩니다. 즉, 아버지가 가지고 있으면 더 이상 소유할 필요가 없다는 의미로 간단히 이해할 수 있습니다. Sass 반복되는 코드 참조에 자주 사용됩니다. 어제 제품에서 검색창을 클릭하면 검색을 위한 새 검색창으로 이동한다고 합니다. 홈페이지 검색창에 글자색만 다른데, 지금은 CSS 두 부분을 모두 다시 작성해야 하나요? 똑똑한 아이는 첫 번째 부분을 물려받아 다른 부분을 다시 작성하려고 생각했습니다.

<code>css代码:
.a{
    background-color:red
    ....
}
.b{
    //假设b也需要背景为红色等
    @extend .a;
    font-size:24px;
}<br>
</code>

PHP에는 include와 같은 키워드도 있습니다. 프론트 엔드 학생들은 PHP에서 include와 require의 차이점과 같은 관련 정보를 참조하여 지식을 보충할 수 있습니다

5. 댓글

  sass中的注释有两种，一种是我们在css中使用的/**/，一种是//注释，前者在编码阶段和编译后的阶段都会被保留，而后者只存在于编码阶段，也就是给程序看的咯~

 

6.文件定义

  sass中的文件定义也很简单，我们只需要知道一点就可以，以_开头的文件名不会被sass编译器编译成css文件，所以他有个见名知意的名字叫 局部文件 而以_下开头的文件中通常会被用作定义一些全部变量，如字体大小颜色等，至少我这个项目是这样做的，如_var.scss文件他的存在形式只会有一种，就是scss后缀结尾的文件，而aa.scss这样的文件，经过sass编译器就会被编译为css文件，我们知道浏览器的渲染引擎只认css文件。不过此刻问题又来了，那_var.scss该怎么使用呢？

 

7.sass中的import和css中import的区别

  _var.scss文件既然不会被编译为css文件，那就意味着他没有办法被浏览器解析，上文也提到过通常使用他来声明一些变量，那么这些变量将怎么被主文件引用呢？这里我们依旧使用的是css中就有的一个关键字@import指令，只是sass中的对这个指令进行的了一定的增强，这里需要大家明确一点，在sass中 *_var和var代表同一个文件* ，所以当引入_var这个文件的时候，只需要写var即可，sass中使用@import引入sass文件的时候只需要写上文件名而不需要后缀，这点就和node中使用require引入一个模块是类似的，例如@import "var",这里大家可能会有疑问怎么使用这个指令来引入曾经的css文件，其实我们上边已经说过@import是sass对css中同名指令的增强，所以当sass判断到@import指令后面出现后缀名、url函数、http等关键字时就会认为你使用的是css中原生的@import指令。

 

关于css中@import的最佳实践，在性能优化方面并不提倡大家在css中经常使用@import指令，我们知道当浏览器引擎拿到一个网页文件的时候是先生成dom树，其次构建渲染树进行渲染，而@import是内嵌在css中的，也就是他会比link标签中的css代码晚一步执行，所以使用这个指令会造成页面的卡顿留白。

 

8.属性的连写拆分

  在css中有个称之为属性连写的概念，如padding：5px，其实我们也可以分写成padding-left、padding-right等，可见这样分写冗余了一个padding关键字，那在sass中要怎样等价替换呢？

<code>css代码
.a{
    padding-left:2px;
    padding-right:2px;
}

sass代码
.a{
    padding{
        left:2px;
        right:2px;
    }
}
</code>

 

9.其他

  以上知识sass中最为简单常用的一部分，也是作为一个刚入门的新手必然要掌握的一部分内容，关于sass的其他技巧如可以进行带单位的计算、@if、@at-root等指令如若需要大家可以查阅相关的资料加以补充。