Get started with sass in just a few words-HTML Tutorial-php.cn

Background:

This is my first time taking over a company project. Although I have briefly read some basic knowledge of sass before, the knowledge has long been scattered by the wind because I have not been working on it for a long time. Now I will review it and write down some key points of common sense. . Sass is written in ruby, so before using it, please make sure you have a ruby development environment on your machine. Use the ruby -v command under cmd to check the current ruby version.

Introduction and overview:

Sass is a preprocessing tool for CSS. When our CSS code is large, it can simplify our development and facilitate subsequent maintenance. What is a preprocessing tool? A simple understanding is the work to be done before generating real css code. It incorporates some high-level language features to improve the efficiency of our css writing, and sass also supports css3.

Do you remember the preprocessing in C language? There are many types of preprocessing in the C language, the least known of which is "macro definition". The function of a macro definition is to define a preset constant, and then use this constant to preprocess all parts of the code where this constant appears. Replace the set value, for example

#define A 5
, which means to directly replace all A appearing in the following code with 5, and these tasks must be performed before the code is compiled, so the macro definition is pre- A kind of processing.

Back to our above, we know that the css code must be written in a file with the file suffix css before compilation and analysis can be performed. Since sass is a pre-compiled tool, it is conceivable that the use of sass must be done before css is generated. Yes, well, it is indeed the case. There are two most commonly used ways of writing sass. They correspond to different suffix names

sass and scss

. The former follows the grammar of languages such as ruby and python, and uses spaces as the language grammar. part, and the latter is closer to the majority of front-end enthusiasts. It uses the most common curly braces in our CSS as grammatical support. The differences for the same piece of code are as follows

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

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

Copy after login

It should be noted that the two syntaxes cannot be mixed in the same file, but tools can be used to convert each other.

Commonly used tips:

1. Class name nesting

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

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

Copy after login

2.Variables

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

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

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

Copy after login

3. Pseudo class/pseudo element writing method

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

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

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

Copy after login

A small point to note here is the difference between pseudo-classes and pseudo-elements: Pseudo-elements are a concept that only appeared in CSS3, represented by two::. Pseudo-classes are meant to add special effects to certain selectors, while Pseudo elements are meant to add some special effects to certain selectors. Common pseudo classes are link, visited, hover, and active. It is worth mentioning here that everyone must pay attention to the order of my writing. When these four pseudo elements When classes want to appear and be used at the same time, their writing order must be consistent with mine, otherwise it will be invalid. How to remember it? Have you heard of LV bag? Is he okay? Um! lvha. . Just remember the whole word with the first letter. Needless to say, commonly used pseudo-elements such as after, before, first-letter, first-line, etc., so everyone must know two points, firstly, when to write several semicolons, and secondly, when using multiple pseudo-classes at the same time order issue.

4. Inheritance of code reuse

Seeing this, everyone must think of the second point written above. The definition of variables is for the reuse of a certain value. What should you do if you want to reuse a large section of code? You can use the inheritance we are going to introduce now. Inheritance in sass has two pairs of keywords

@mixin/@include and @extend

. The working principles of the two are also very different. @mixin defines a code block, @include introduces the defined code block, and @extend introduces the currently defined class style. Students who are familiar with C language know that include is a type of macro definition in C language. It can be understood as synonymous here, equivalent to code copy, so when our When Sass parses this keyword, it will directly copy the code in @mixin. If @extend appears in a class, it will juxtapose the current class name to the class name to be inherited, which is the name of b in the example. It will appear in a, and the final effect is .a, .b, that is, both class a and class b will have this attribute. Inheritance is an object-oriented concept. The @extned keyword is used in Sass, which means borrowing. It can be simply understood that if your father has it, you don’t need to own it anymore. Just use it directly. In our Sass It is often used for repeated code references. The product gave me a request the day before yesterday. He said that clicking the search box will jump to a new search page for searching. The search box on the new page is mostly the same as the search box on the homepage, only the font color is different. , Do I need to rewrite both parts of css at this moment? The smart kid thought of inheriting the first part and rewriting the different ones.

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

Copy after login

There are also keywords such as include in php. Front-end students can consult relevant information to supplement their knowledge, such as the difference between include and require in php

5. Comments

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>

Copy after login

9.其他

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