vue中scss用法_vue使用scss

作者：从前慢现在也慢 | 2024-02-14 23:22:30

踩

vue使用scss

我们这里用两个部分来说明吧。

1.如何学习Scss
2.如何使用Scss

1.如何学习Scss

学习Scss的第一步不是你要知道什么是Scss的概念啊什么的，而是找到一个合适的资源从头开始学习，我在这里推荐慕课网的资源Sass入门篇，还有Sass进阶篇，sass中文官网
大家学习完以后，基本上就什么会了。

这里我整理一下它的一些重要的概念。基本上如果你知道这些，基本的使用就可以了。

Sass是什么？

Sass并不是其他的什么，而是CSS预处理器，预处理器就是定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这些语言进行编码工作。

果然，概念就不是给人看的。用CSS预处理器可以让你的编码效率提高十倍。就是这样…

还有很多其他的CSS预处理器，比如


    
    
      
      
       
       
      
      
      
      
       
       
        
        Sass（SCSS）
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        LESS
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        Stylus
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        Turbine
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        Swithch CSS
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        CSS Cacheer
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        DT CSS
       
       
      
      
    
    
1

其中最优秀的技师Sass、LESS和Stylus，在这里，我们聊一下Sass.

Sass 和 SCSS 有什么区别？

其实这两货说的是一个东东，由于一开始Sass规定的语法格式是严格的缩进式语法，不带大括号和分号，所以造成程序员在写sass的时候有非常大的不习惯，虽然它是最早的预处理器，却没有人家LESS用的人多，所以又支持了使用大括号和分号，这就是SCSS.

1.文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名

2.语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

看代码：Sass语法


    
    
      
      
       
       
      
      
      
      
       
       
        
           $font-stack: Helvetica, sans-serif  <span class="hljs-comment"><span class="hljs-comment">//定义变量</span></span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="php">   $primary-color: #333 //定义变量
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
           
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
           body
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
             font: 100% $font-stack</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="php">     color: $primary-color
       
       
      
      

      
      
       
       
      
      
      
      
       
       
      
      
    
    
1

Scss语法：


    
    
      
      
       
       
      
      
      
      
       
       
        
        $font</span></span>-stack: Helvetica, sans-serif;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-variable"><span class="hljs-variable">$primary-color: 
        
        #333;
       
       
      
      

      
      
       
       
      
      
      
      
       
        
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        body {
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
          font: 100% 
        
        $font</span></span>-stack;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> color: <span class="hljs-variable"><span class="hljs-variable">$primary-color;
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        }
       
       
      
      
    
    
1

SASS环境的安装

Mac版的安装

Windows版的安装

Sass的基本特性-基础

声明变量

image

上面的图告诉大家，Sass的变量包括了三个部分：


    
    
      
      
       
       
      
      
      
      
       
       
        
        1. 声明变量的符号“$”</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby"><span class="hljs-number"><span class="hljs-number">2</span></span>.变量名称</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby"><span class="hljs-number"><span class="hljs-number">3</span></span>.赋予变量的值</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"></div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><p>例如：</p><pre onclick="hljs.copyCode(event)"><code class="language-php hljs"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="php">brand-primary : darken(<span class="hljs-comment"><span class="hljs-comment">#428bca, 6.5%) !default; // #337ab7</span></span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="php">$btn-primary-color : #fff !default;
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        $btn-primary-bg : $brand-primary !default;
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        $btn-primary-border : darken($btn-primary-bg, 5%) !default;
       
       
      
      

      
      
       
       
      
      
      
      
       
       
      
      
    
    
1

!default表示的是默认值。

普通变量与默认变量

上面我们知道，如果想要设置默认值，只需要!default在值的后面就可以了。

那么如果我们想要覆盖的时候怎么办呢，就是在前面申明一个就行。


    
    
      
      
       
       
      
      
      
      
       
       
        
        $baseLineHeight: <span class="hljs-number"><span class="hljs-number">2</span></span>;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="php">$baseLineHeight: 1.5 !default;
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        body{
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
            line-height: $baseLineHeight; </code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="php">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"></div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><p>编译后：</p><pre onclick="hljs.copyCode(event)"><code class="language-css hljs"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css"><span class="hljs-selector-tag"><span class="hljs-selector-tag">body</span></span>{</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">    <span class="hljs-attribute"><span class="hljs-attribute">line-height</span></span>:<span class="hljs-number"><span class="hljs-number">2</span></span>;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"></div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><h4>嵌套-选择器嵌套</h4><p>Sass 的嵌套分为三种：</p><pre class="hljs undefined" name="code" onclick="hljs.copyCode(event)"><code class="hljs"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">选择器嵌套</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">属性嵌套</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">伪类嵌套</div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><p>下面我们看选择器嵌套，例如我们有一段这样的结构：</p><pre class="hljs xml" name="code" onclick="hljs.copyCode(event)"><code class="xml hljs"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">header</span></span></span><span class="hljs-tag">&gt;</span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">nav</span></span></span><span class="hljs-tag">&gt;</span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">a</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">href</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">“##”</span></span></span><span class="hljs-tag">&gt;</span></span>Home<span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">a</span></span></span><span class="hljs-tag">&gt;</span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">a</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">href</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">“##”</span></span></span><span class="hljs-tag">&gt;</span></span>About<span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">a</span></span></span><span class="hljs-tag">&gt;</span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">a</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">href</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">“##”</span></span></span><span class="hljs-tag">&gt;</span></span>Blog<span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">a</span></span></span><span class="hljs-tag">&gt;</span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">nav</span></span></span><span class="hljs-tag">&gt;</span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">header</span></span></span><span class="hljs-tag">&gt;</span></span></div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><p>如果想要选中<code>header</code>中的<code>a</code>标签，在写<code>CSS</code>会这样写：</p><pre onclick="hljs.copyCode(event)"><code class="language-css hljs"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css"><span class="hljs-selector-tag"><span class="hljs-selector-tag">nav</span></span> <span class="hljs-selector-tag"><span class="hljs-selector-tag">a</span></span> {</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">    <span class="hljs-attribute"><span class="hljs-attribute">calor</span></span>:red;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css"> </code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css"><span class="hljs-selector-tag"><span class="hljs-selector-tag">header</span></span> <span class="hljs-selector-tag"><span class="hljs-selector-tag">nav</span></span> <span class="hljs-selector-tag"><span class="hljs-selector-tag">a</span></span> {</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">    <span class="hljs-attribute"><span class="hljs-attribute">color</span></span>:green;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"></div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><p>在<code>Sass</code>中，就可以使用选择器嵌套来实现：</p><pre class="hljs undefined" name="code" onclick="hljs.copyCode(event)"><code class="hljs delphi"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">nav <span class="hljs-comment"><span class="hljs-comment">{</span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment">    a {</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment">        color:red;</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment">        </span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment">        header &amp; {</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment">            color:green;</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment">        }</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">}</div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><h4>嵌套-属性嵌套</h4><p><code>Sass</code>提供的属性嵌套主要是针对<code>CSS</code>有一些属性前缀相同，只是后缀不一样，比如<code>border-top/border-right</code>还有<br><code>margin,padding,font</code>等属性，假设你的样式中用到了：</p><pre onclick="hljs.copyCode(event)"><code class="language-css hljs"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css"><span class="hljs-selector-class"><span class="hljs-selector-class">.box</span></span>{</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">    <span class="hljs-attribute"><span class="hljs-attribute">border-top</span></span>:<span class="hljs-number"><span class="hljs-number">1px</span></span> solid red;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">    <span class="hljs-attribute"><span class="hljs-attribute">border-bottom</span></span>:<span class="hljs-number"><span class="hljs-number">1px</span></span> solid green;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"></div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><p>在<code>Sass</code>中，我们可以这样写：</p><pre onclick="hljs.copyCode(event)"><code class="language-css hljs"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css"><span class="hljs-selector-class"><span class="hljs-selector-class">.box</span></span>{</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">    <span class="hljs-attribute"><span class="hljs-attribute">border</span></span>:{</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">        top:<span class="hljs-number"><span class="hljs-number">1px</span></span> solid red;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">        <span class="hljs-attribute"><span class="hljs-attribute">bottom</span></span>:<span class="hljs-number"><span class="hljs-number">1px</span></span> solid green;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">    }</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"></div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><h4>嵌套-伪类嵌套</h4><p>其实伪类嵌套和属性嵌套非常类似，只不过他需要借助<code>&amp;</code>符号一起配合使用。我们就拿经典的“clearfix”为例吧：</p><pre onclick="hljs.copyCode(event)"><code class="language-ruby hljs"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby">.clearfix{</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby">&amp;<span class="hljs-symbol"><span class="hljs-symbol">:before</span></span>,</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby">&amp;<span class="hljs-symbol"><span class="hljs-symbol">:after</span></span> {</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby">    <span class="hljs-symbol"><span class="hljs-symbol">content:</span></span><span class="hljs-string"><span class="hljs-string">""</span></span>;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby">    <span class="hljs-symbol"><span class="hljs-symbol">display:</span></span> table;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby">  }</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby">&amp;<span class="hljs-symbol"><span class="hljs-symbol">:after</span></span> {</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby">    <span class="hljs-symbol"><span class="hljs-symbol">clear:</span></span>both;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby">    <span class="hljs-symbol"><span class="hljs-symbol">overflow:</span></span> hidden;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby">  }</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"></div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><p>编译出来的<code>CSS</code></p><pre onclick="hljs.copyCode(event)"><code class="language-css hljs"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css"><span class="hljs-selector-tag"><span class="hljs-selector-tag">clearfix</span></span><span class="hljs-selector-pseudo"><span class="hljs-selector-pseudo">:before</span></span>, <span class="hljs-selector-class"><span class="hljs-selector-class">.clearfix</span></span><span class="hljs-selector-pseudo"><span class="hljs-selector-pseudo">:after</span></span> {</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">  <span class="hljs-attribute"><span class="hljs-attribute">content</span></span>: <span class="hljs-string"><span class="hljs-string">""</span></span>;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">  <span class="hljs-attribute"><span class="hljs-attribute">display</span></span>: table;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css"><span class="hljs-selector-class"><span class="hljs-selector-class">.clearfix</span></span><span class="hljs-selector-pseudo"><span class="hljs-selector-pseudo">:after</span></span> {</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">  <span class="hljs-attribute"><span class="hljs-attribute">clear</span></span>: both;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">  <span class="hljs-attribute"><span class="hljs-attribute">overflow</span></span>: hidden;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"></div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><h5>避免选择器嵌套：</h5><pre class="hljs undefined" name="code" onclick="hljs.copyCode(event)"><code class="hljs"><ol class="hljs-ln" style="width:1063px"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">选择器嵌套最大的问题是将使最终的代码难以阅读。开发者需要花费巨大精力计算不同缩进级别下的选择器具体的表现效果。</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">选择器越具体则声明语句越冗长，而且对最近选择器的引用(&amp;)也越频繁。在某些时候，出现混淆选择器路径和探索下一级选择器的错误率很高，这非常不值得。</div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><h4>混合宏-声明混合宏</h4><p>混合宏的出现主要是为了解决当样式变得越来越多，越来越复杂的时候，需要重复使用大段样式时，而使用变量又无法达到我们的目的，这个时候就要用到了混合宏。</p><p>1.声明混合宏</p><p>我们通过<code>@mixin</code>来声明一个混合宏：</p><pre onclick="hljs.copyCode(event)"><code class="language-css hljs"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">@<span class="hljs-keyword"><span class="hljs-keyword">mixin</span></span> border-radius{</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">    <span class="hljs-selector-tag"><span class="hljs-selector-tag">-webkit-border-radius</span></span><span class="hljs-selector-pseudo"><span class="hljs-selector-pseudo">:5px</span></span>;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">    <span class="hljs-selector-tag"><span class="hljs-selector-tag">border-radius</span></span><span class="hljs-selector-pseudo"><span class="hljs-selector-pseudo">:5px</span></span>;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"></div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><p>其中<code>@mixin</code>是混合宏的关键词，类似于<code>css</code>中的<code>@media</code>,<code>@font-face</code>一样。<code>border-radius</code>是混合宏的名称。大括号里面是复用的样式代码。</p><p>2.带参数混合宏</p><p>我们可以定义混合宏时带有参数：</p><pre onclick="hljs.copyCode(event)"><code class="language-ruby hljs"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby">@mixin border-radius($radius:5px){
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
            -webkit-border-radius: $radius;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby">    border-<span class="hljs-symbol"><span class="hljs-symbol">radius:</span></span> $radius;
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        }
       
       
      
      

      
      
       
       
      
      
      
      
       
       
      
      
    
    
1

3.复杂的混合宏

我们可以在大括号里面写上逻辑关系


    
    
      
      
       
       
      
      
      
      
       
       
        
        @mixin box-shadow($shadow...) {</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby">  @if length($shadow) &gt;= <span class="hljs-number"><span class="hljs-number">1</span></span> {</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby">    @include prefixer(box-shadow, $shadow);</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby">  } @else{</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby">    $shadow<span class="hljs-symbol"><span class="hljs-symbol">:</span></span><span class="hljs-number"><span class="hljs-number">0</span></span> <span class="hljs-number"><span class="hljs-number">0</span></span> <span class="hljs-number"><span class="hljs-number">4</span></span>px rgba(<span class="hljs-number"><span class="hljs-number">0</span></span>,<span class="hljs-number"><span class="hljs-number">0</span></span>,<span class="hljs-number"><span class="hljs-number">0</span></span>,.<span class="hljs-number"><span class="hljs-number">3</span></span>);</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby">    @include prefixer(box-shadow, $shadow);</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby">  }</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"></div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><p>这个<code>box-shadow</code>的混合宏，带有多个参数，这个时候可以使用<code>...</code>来代替。<br>上面的意思是当<code>$shadow的参数数值大于或等于1时，表示有多个阴影值，反之调用默认的参数值
        
        混合宏的调用
        
        我们通过关键词@include来调用声明好的混合宏，然后如果需要传参数，我们就传入参数；

        
        
         
         
           
           
            
            
           
           
           
           
            
            
             
             @mixin border-radius{
            
            
           
           

           
           
            
            
           
           
           
           
            
            
             
                 -webkit-border-radius: 3px;
            
            
           
           

           
           
            
            
           
           
           
           
            
            
             
                 border-radius: 3px;
            
            
           
           

           
           
            
            
           
           
           
           
            
            
             
             }
            
            
           
           

           
           
            
            
           
           
           
           
            
            
           
           
         
         
1
        
        使用：
        
        
         
         
           
           
            
            
           
           
           
           
            
            
             
             button {
            
            
           
           

           
           
            
            
           
           
           
           
            
            
             
                 @include border-radius;
            
            
           
           

           
           
            
            
           
           
           
           
            
            
             
             }
            
            
           
           

           
           
            
            
           
           
           
           
            
            
           
           
         
         
1
        
        混合宏的参数
        
        1.传一个不带值的参数
        
        我们在混合宏中，可以传一个不带任何值的参数：
        
        
         
         
           
           
            
            
           
           
           
           
            
            
             
             @mixin border-radius($radius){</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby">    -webkit-border-<span class="hljs-symbol"><span class="hljs-symbol">radius:</span></span> $radius;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby">    border-<span class="hljs-symbol"><span class="hljs-symbol">radius:</span></span> $radius;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"></div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><p>我们定义了一个不带任何值的参数<code>$radius,然后我们在调用的时候给这个参数传值：
             
             
              
              
                
                
                 
                 
                
                
                
                
                 
                 
                  
                  .box {
                 
                 
                
                

                
                
                 
                 
                
                
                
                
                 
                 
                  
                      @include border-radius(3px);
                 
                 
                
                

                
                
                 
                 
                
                
                
                
                 
                 
                  
                  }
                 
                 
                
                

                
                
                 
                 
                
                
                
                
                 
                 
                
                
              
              
1
             
             2.传一个带值的参数
             
             
              
              
                
                
                 
                 
                
                
                
                
                 
                 
                  
                  @mixin border-radius($radius<span class="hljs-symbol"><span class="hljs-symbol">:</span></span><span class="hljs-number"><span class="hljs-number">5</span></span>px){</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby">    -webkit-border-<span class="hljs-symbol"><span class="hljs-symbol">radius:</span></span> $radius;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby">    border-<span class="hljs-symbol"><span class="hljs-symbol">radius:</span></span> $radius;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"></div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><p>在混合宏声明的时候，我们给这个参数的添加了一个默认值。<code>5px</code>我们可以传参数，同样也可以不传。</p><pre onclick="hljs.copyCode(event)"><code class="language-java hljs"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">.btn{</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">    <span class="hljs-meta"><span class="hljs-meta">@include</span></span> border-radus;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">    </code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"></div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><p>3.混合宏传多个参数<br>混合宏可以传多个参数：例如：</p><pre onclick="hljs.copyCode(event)"><code class="language-ruby hljs"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby">@mixin center($width,$height){</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby">  <span class="hljs-symbol"><span class="hljs-symbol">width:</span></span> $width;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby">  <span class="hljs-symbol"><span class="hljs-symbol">height:</span></span> $height;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby">  <span class="hljs-symbol"><span class="hljs-symbol">position:</span></span> absolute;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby">  <span class="hljs-symbol"><span class="hljs-symbol">top:</span></span> <span class="hljs-number"><span class="hljs-number">50</span></span>%;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby">  <span class="hljs-symbol"><span class="hljs-symbol">left:</span></span> <span class="hljs-number"><span class="hljs-number">50</span></span>%;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby">  margin-<span class="hljs-symbol"><span class="hljs-symbol">top:</span></span> -($height) / <span class="hljs-number"><span class="hljs-number">2</span></span>;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby">  margin-<span class="hljs-symbol"><span class="hljs-symbol">left:</span></span> -($width) / <span class="hljs-number"><span class="hljs-number">2</span></span>;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"></div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><p>使用的时候一样</p><pre onclick="hljs.copyCode(event)"><code class="language-cpp hljs"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="cpp">.box-center{</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="cpp">    @<span class="hljs-function"><span class="hljs-function">include </span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">center</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(</span></span><span class="hljs-number"><span class="hljs-function"><span class="hljs-params"><span class="hljs-number">500</span></span></span></span><span class="hljs-function"><span class="hljs-params">px,</span></span><span class="hljs-number"><span class="hljs-function"><span class="hljs-params"><span class="hljs-number">300</span></span></span></span><span class="hljs-function"><span class="hljs-params">px)</span></span></span></span>;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="cpp">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"></div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><p>这个混合宏和我们编程里的函数很像啊。</p><h4>混合宏的不足</h4><p>混合宏的不足的地方就是不能智能的合并相同的代码。它的缺点和它的优点一样重要，这样我们才能在合适的地方用合适的代码。</p><pre onclick="hljs.copyCode(event)"><code class="language-java hljs"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java"><span class="hljs-meta"><span class="hljs-meta">@mixin</span></span> border-radius{</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">  -webkit-border-radius: <span class="hljs-number"><span class="hljs-number">3</span></span>px;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">  border-radius: <span class="hljs-number"><span class="hljs-number">3</span></span>px;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java"> </code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">.box {</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">  <span class="hljs-meta"><span class="hljs-meta">@include</span></span> border-radius;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">  margin-bottom: <span class="hljs-number"><span class="hljs-number">5</span></span>px;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java"> </code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">.btn {</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">  <span class="hljs-meta"><span class="hljs-meta">@include</span></span> border-radius;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"></div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><p>在代码中，<code>.box</code>和<code>.btn</code>中都调用了定义好的<code>border-radius</code>混合宏，然后我们看一下编译出来的<code>CSS</code></p><pre onclick="hljs.copyCode(event)"><code class="language-css hljs"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css"><span class="hljs-selector-class"><span class="hljs-selector-class">.box</span></span> {</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">  <span class="hljs-attribute"><span class="hljs-attribute">-webkit-border-radius</span></span>: <span class="hljs-number"><span class="hljs-number">3px</span></span>;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">  <span class="hljs-attribute"><span class="hljs-attribute">border-radius</span></span>: <span class="hljs-number"><span class="hljs-number">3px</span></span>;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">  <span class="hljs-attribute"><span class="hljs-attribute">margin-bottom</span></span>: <span class="hljs-number"><span class="hljs-number">5px</span></span>;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css"> </code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css"><span class="hljs-selector-class"><span class="hljs-selector-class">.btn</span></span> {</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">  <span class="hljs-attribute"><span class="hljs-attribute">-webkit-border-radius</span></span>: <span class="hljs-number"><span class="hljs-number">3px</span></span>;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">  <span class="hljs-attribute"><span class="hljs-attribute">border-radius</span></span>: <span class="hljs-number"><span class="hljs-number">3px</span></span>;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"></div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><p>上面的代码可以很明显的看出，<code>Sass</code>在调用相同的混合宏时，并不能智能的将相同的样式代码合并在一起。</p><h4>Scss代码的继承</h4><p><code>Scss</code>代码的继承是通过关键字<code>@extned</code>来实现的。比如：</p><pre onclick="hljs.copyCode(event)"><code class="language-python hljs"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="python">.btn{</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="python">    border:<span class="hljs-number"><span class="hljs-number">1</span></span>px solid <span class="hljs-comment"><span class="hljs-comment">#ccc;</span></span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="python">    padding:<span class="hljs-number"><span class="hljs-number">6</span></span>px <span class="hljs-number"><span class="hljs-number">10</span></span>px;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="python">    font-size:<span class="hljs-number"><span class="hljs-number">14</span></span>px;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="python">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="python"> </code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="python">.btn-primary{</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="python">    background-color:<span class="hljs-comment"><span class="hljs-comment">#f36;</span></span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="python">    color:<span class="hljs-comment"><span class="hljs-comment">#fff;</span></span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="python"><span class="hljs-meta"><span class="hljs-meta">    @extend .btn;</span></span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="python">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="python"> </code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="python"> </code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="python">.btn-second {</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="python">  background-color: orange;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="python">  color: <span class="hljs-comment"><span class="hljs-comment">#fff;</span></span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="python"><span class="hljs-meta"><span class="hljs-meta">  @extend .btn;</span></span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="python">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"></div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><p>就是这样继承的，编译出来后的<code>CSS</code></p><pre onclick="hljs.copyCode(event)"><code class="language-css hljs"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css"><span class="hljs-selector-class"><span class="hljs-selector-class">.btn</span></span>, <span class="hljs-selector-class"><span class="hljs-selector-class">.btn-primary</span></span>, <span class="hljs-selector-class"><span class="hljs-selector-class">.btn-second</span></span> {</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">  <span class="hljs-attribute"><span class="hljs-attribute">border</span></span>: <span class="hljs-number"><span class="hljs-number">1px</span></span> solid <span class="hljs-number"><span class="hljs-number">#ccc</span></span>;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">  <span class="hljs-attribute"><span class="hljs-attribute">padding</span></span>: <span class="hljs-number"><span class="hljs-number">6px</span></span> <span class="hljs-number"><span class="hljs-number">10px</span></span>;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">  <span class="hljs-attribute"><span class="hljs-attribute">font-size</span></span>: <span class="hljs-number"><span class="hljs-number">14px</span></span>;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css"> </code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css"><span class="hljs-selector-class"><span class="hljs-selector-class">.btn-primary</span></span> {</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">  <span class="hljs-attribute"><span class="hljs-attribute">background-color</span></span>: <span class="hljs-number"><span class="hljs-number">#f36</span></span>;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">  <span class="hljs-attribute"><span class="hljs-attribute">color</span></span>: <span class="hljs-number"><span class="hljs-number">#fff</span></span>;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css"> </code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css"><span class="hljs-selector-class"><span class="hljs-selector-class">.btn-second</span></span> {</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">  <span class="hljs-attribute"><span class="hljs-attribute">background-clor</span></span>: orange;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">  <span class="hljs-attribute"><span class="hljs-attribute">color</span></span>: <span class="hljs-number"><span class="hljs-number">#fff</span></span>;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css"> </code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"></div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><h4>占位符 % placeholder</h4><p><code>Sass</code>中的占位符<code>%placeholder</code>功能非常强大，它非常适合去做样式的基类。因为，如果我们不通过<code>@extend</code>调用的时候，不会产生任何代码。例如：</p><pre onclick="hljs.copyCode(event)"><code class="language-java hljs"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">%mt5{</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">    margin-top:<span class="hljs-number"><span class="hljs-number">5</span></span>px;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">%pt5{</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">    padding-top:<span class="hljs-number"><span class="hljs-number">5</span></span>px;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">.btn{</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">    <span class="hljs-meta"><span class="hljs-meta">@extend</span></span> %mt5;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">    <span class="hljs-meta"><span class="hljs-meta">@extend</span></span> %pt5;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java"> </code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">.block {</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">    <span class="hljs-meta"><span class="hljs-meta">@extend</span></span> %mt5;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">    </code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">    span {</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">        <span class="hljs-meta"><span class="hljs-meta">@extend</span></span> %pt5;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">    }</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"></div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><p>我们看编译后的代码：</p><pre onclick="hljs.copyCode(event)"><code class="language-css hljs"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css"><span class="hljs-selector-class"><span class="hljs-selector-class">.btn</span></span>, <span class="hljs-selector-class"><span class="hljs-selector-class">.block</span></span> {</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">  <span class="hljs-attribute"><span class="hljs-attribute">margin-top</span></span>: <span class="hljs-number"><span class="hljs-number">5px</span></span>;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css"> </code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css"><span class="hljs-selector-class"><span class="hljs-selector-class">.btn</span></span>, <span class="hljs-selector-class"><span class="hljs-selector-class">.block</span></span> <span class="hljs-selector-tag"><span class="hljs-selector-tag">span</span></span> {</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">  <span class="hljs-attribute"><span class="hljs-attribute">padding-top</span></span>: <span class="hljs-number"><span class="hljs-number">5px</span></span>;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"></div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><p>我们可以看到，通过<code>@extend</code>调用的占位符，编译出来的代码将相同的代码合并在一起，这样让你的代码更加干净。</p><h4>混合宏 VS 继承 VS 占位符</h4><p>我们这里总结一下，看图就好：</p><br><div class="image-package"><div class="image-container"><div class="image-container-fill"></div><div class="image-view"><img src="//upload-images.jianshu.io/upload_images/788601-d5b16550ff408b91.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/700" alt=""></div></div><div class="image-caption">image</div></div><h4>插值#{}</h4><p>通过 <code>#{}</code> 插值语句可以在选择器或属性名中使用变量：</p><pre onclick="hljs.copyCode(event)"><code class="language-ruby hljs"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby">$name:foo;
                 
                 
                
                

                
                
                 
                 
                
                
                
                
                 
                 
                  
                  $attr<span class="hljs-symbol"><span class="hljs-symbol">:border</span></span>;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby">p.<span class="hljs-comment"><span class="hljs-comment">#{$name}{</span></span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby">    <span class="hljs-comment"><span class="hljs-comment">#{$attr}-color:blue;</span></span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="ruby">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"></div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><p>编译为：</p><pre onclick="hljs.copyCode(event)"><code class="language-css hljs"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css"><span class="hljs-selector-tag"><span class="hljs-selector-tag">p</span></span><span class="hljs-selector-class"><span class="hljs-selector-class">.foo</span></span>{</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">    <span class="hljs-attribute"><span class="hljs-attribute">border-color</span></span>:blue;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"></div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><p><code>#{}</code>插值语句也可以在属性值中插入<code>SassScript</code>，大多数情况下，这样可能还不如使用变量方便，但是使用<code>#{}</code>可以避免<code>Sass</code>运行运算表达式，直接编译<code>CSS</code>.</p><pre class="hljs bash" name="code" onclick="hljs.copyCode(event)"><code class="bash hljs"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">p {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">  <span class="hljs-variable"><span class="hljs-variable">$font</span></span>-size: 12px;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">  <span class="hljs-variable"><span class="hljs-variable">$line</span></span>-height: 30px;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">  font: <span class="hljs-comment"><span class="hljs-comment">#{$font-size}/#{$line-height};</span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">}</div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><p>编译为：</p><pre onclick="hljs.copyCode(event)"><code class="language-css hljs"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css"><span class="hljs-selector-tag"><span class="hljs-selector-tag">p</span></span> {</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">    <span class="hljs-attribute"><span class="hljs-attribute">font</span></span>:<span class="hljs-number"><span class="hljs-number">12px</span></span> /<span class="hljs-number"><span class="hljs-number">30px</span></span>;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="css">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"></div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><p>上面基础的<code>Scss</code>语法就介绍到这里.</p><h3><a name="t1"></a>2.如何使用Scss</h3><p>首先，我们需要安装依赖包</p><pre onclick="hljs.copyCode(event)"><code class="language-cpp hljs"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="cpp"><span class="hljs-comment"><span class="hljs-comment">//在项目下，运行下列命令行</span></span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="cpp">npm install --save-dev sass-loader</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="cpp"><span class="hljs-comment"><span class="hljs-comment">//因为sass-loader依赖于node-sass，所以还要安装node-sass</span></span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="cpp">npm install --save-dev node-sass</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"></div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><p><code>css-loader</code>和<code>style-loader</code>也是必须的依赖包:</p><pre onclick="hljs.copyCode(event)"><code class="language-javascript hljs"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="javascript">css-loader使你能够使用类似@<span class="hljs-keyword"><span class="hljs-keyword">import</span></span> 和 url(…)的方法实现 <span class="hljs-built_in"><span class="hljs-built_in">require</span></span>()的功能；</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="javascript">style-loader将所有的计算后的样式加入页面中；</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"></div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><p>下面是webpack.config.js文件的部分配置：</p><pre onclick="hljs.copyCode(event)"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:1257px"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="javascript"><span class="hljs-keyword"><span class="hljs-keyword">var</span></span> ExtractTextPlugin = <span class="hljs-built_in"><span class="hljs-built_in">require</span></span>(<span class="hljs-string"><span class="hljs-string">'extract-text-webpack-plugin'</span></span>);<span class="hljs-comment"><span class="hljs-comment">//css样式从js文件中分离出来,需要通过命令行安装 extract-text-webpack-plugin依赖包</span></span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="javascript"><span class="hljs-built_in"><span class="hljs-built_in">module</span></span>.exports = {</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="javascript">    ....</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="javascript">    module: {</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="javascript">        <span class="hljs-attr"><span class="hljs-attr">loaders</span></span>: [</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="javascript">            <span class="hljs-comment"><span class="hljs-comment">//解析.css文件</span></span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="javascript">            {</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="javascript">                <span class="hljs-attr"><span class="hljs-attr">test</span></span>: <span class="hljs-regexp"><span class="hljs-regexp">/\.css$/</span></span>,</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="javascript">                <span class="hljs-attr"><span class="hljs-attr">loader</span></span>: ExtractTextPlugin.extract(<span class="hljs-string"><span class="hljs-string">"style"</span></span>, <span class="hljs-string"><span class="hljs-string">'css'</span></span>)</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="javascript">            },</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="javascript">            <span class="hljs-comment"><span class="hljs-comment">//解析.vue文件</span></span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="javascript">            {</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="javascript">                <span class="hljs-attr"><span class="hljs-attr">test</span></span>: <span class="hljs-regexp"><span class="hljs-regexp">/\.vue$/</span></span>,</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="javascript">                <span class="hljs-attr"><span class="hljs-attr">loader</span></span>: <span class="hljs-string"><span class="hljs-string">'vue'</span></span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="javascript">            }, </code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="javascript">            <span class="hljs-comment"><span class="hljs-comment">//解析.scss文件,对于用 import 或 require 引入的sass文件进行加载，以及&lt;style lang="sass"&gt;...&lt;/style&gt;声明的内部样式进行加载</span></span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="javascript">            {</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="javascript">                <span class="hljs-attr"><span class="hljs-attr">test</span></span>: <span class="hljs-regexp"><span class="hljs-regexp">/\.scss$/</span></span>,</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="javascript">                <span class="hljs-attr"><span class="hljs-attr">loader</span></span>: ExtractTextPlugin.extract(<span class="hljs-string"><span class="hljs-string">"style"</span></span>, <span class="hljs-string"><span class="hljs-string">'css!sass'</span></span>) <span class="hljs-comment"><span class="hljs-comment">//这里用了样式分离出来的插件，如果不想分离出来，可以直接这样写 loader:'style!css!sass'</span></span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="javascript">            }</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="javascript">        ]</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="22"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="javascript">    },</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="javascript">    <span class="hljs-comment"><span class="hljs-comment">//.vue文件的配置，以下是为了在.vue文件中使用ES6语法（必须安装babel相关的依赖包），以及把使用css或sass语法的样式提取出来，如果不需要可以忽略</span></span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="24"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="javascript">    vue: {</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="25"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="javascript">        <span class="hljs-attr"><span class="hljs-attr">loaders</span></span>: {</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="26"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="javascript">            <span class="hljs-attr"><span class="hljs-attr">js</span></span>: <span class="hljs-string"><span class="hljs-string">'babel'</span></span>, </code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="27"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="javascript">            <span class="hljs-attr"><span class="hljs-attr">css</span></span>: ExtractTextPlugin.extract(<span class="hljs-string"><span class="hljs-string">"css"</span></span>),</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="28"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="javascript">            <span class="hljs-attr"><span class="hljs-attr">sass</span></span>: ExtractTextPlugin.extract(<span class="hljs-string"><span class="hljs-string">"css!sass"</span></span>)            </code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="29"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="javascript">        },</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="30"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="javascript">    },</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="31"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="javascript">    <span class="hljs-attr"><span class="hljs-attr">plugins</span></span>: [</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="32"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="javascript">        <span class="hljs-keyword"><span class="hljs-keyword">new</span></span> ExtractTextPlugin(<span class="hljs-string"><span class="hljs-string">"style.css"</span></span>) <span class="hljs-comment"><span class="hljs-comment">//提取出来的样式放在style.css文件中</span></span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="33"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="javascript">    ]</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="34"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="javascript">    ....</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="35"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="javascript">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="36"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"></div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><p>使用的时候直接<code>import</code>就可以了,引入外部样式，下面两种写法都可以用：</p><pre onclick="hljs.copyCode(event)"><code class="language-javascript hljs"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="javascript"><span class="hljs-keyword"><span class="hljs-keyword">import</span></span> <span class="hljs-string"><span class="hljs-string">'../../css/test.scss'</span></span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="javascript"><span class="hljs-built_in"><span class="hljs-built_in">require</span></span>(<span class="hljs-string"><span class="hljs-string">'../../css/test2.scss'</span></span>);</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"></div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><p>我们在<code>react js</code>中就可以这样写：<br>在<code>.vue</code>文件中使用：</p><pre class="hljs xml" name="code" onclick="hljs.copyCode(event)"><code class="xml hljs"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">style</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">lang</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"sass"</span></span></span><span class="hljs-tag">&gt;</span></span><span class="undefined"><span class="undefined"></span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">     //sass语法样式</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">style</span></span></span><span class="hljs-tag">&gt;</span></span></div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><p>这里的使用部分参考了：<a href="https://link.jianshu.com?t=http%3A%2F%2Fwww.cnblogs.com%2Fww03%2Fp%2F6037710.html" rel="nofollow" target="_blank">webpack配置sass模块的加载</a></p><h4>这里分享一个我自己写的<code>base_layout.Scss</code>：</h4><p>颜色和大小 <code>base.scss</code></p><pre onclick="hljs.copyCode(event)"><code class="language-php hljs"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="php"><span class="hljs-comment"><span class="hljs-comment"><span class="hljs-comment">/**</span></span></span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="php"><span class="hljs-comment"> * 字体和颜色，基础布局的base文件</span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="php"><span class="hljs-comment"> */</span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="php"><span class="hljs-comment"><span class="hljs-comment">//字体大小</span></span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="php">$remindTitleSize:20px;
                 
                 
                
                

                
                
                 
                 
                
                
                
                
                 
                 
                  
                  $navigationSize:<span class="hljs-number"><span class="hljs-number">18</span></span>px;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="php">$contentSize:17px;
                 
                 
                
                

                
                
                 
                 
                
                
                
                
                 
                 
                  
                  $buttonSize:<span class="hljs-number"><span class="hljs-number">16</span></span>px;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="php">$tabFontSize:15px;
                 
                 
                
                

                
                
                 
                 
                
                
                
                
                 
                 
                  
                  $minorSize:<span class="hljs-number"><span class="hljs-number">14</span></span>px;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="php">$smalltitleSize:13px;
                 
                 
                
                

                
                
                 
                 
                
                
                
                
                 
                 
                  
                  $smallerSize:<span class="hljs-number"><span class="hljs-number">12</span></span>px;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="php">$assistSize:11px;
                 
                 
                
                

                
                
                 
                 
                
                
                
                
                 
                 
                  
                   
                 
                 
                
                

                
                
                 
                 
                
                
                
                
                 
                 
                  
                  //颜色
                 
                 
                
                

                
                
                 
                 
                
                
                
                
                 
                 
                  
                  $white:<span class="hljs-comment"><span class="hljs-comment">#fff;</span></span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="php">$assistColor:#c1c1c1;
                 
                 
                
                

                
                
                 
                 
                
                
                
                
                 
                 
                  
                  $minorColor:<span class="hljs-comment"><span class="hljs-comment">#8e8e8e;</span></span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="php">$contentColor:#5e5e5e;
                 
                 
                
                

                
                
                 
                 
                
                
                
                
                 
                 
                  
                  $remindColor:<span class="hljs-comment"><span class="hljs-comment">#ee5765;</span></span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="php">$buttonColor:#7d9ef0;
                 
                 
                
                

                
                
                 
                 
                
                
                
                
                 
                 
                  
                  $backgroundColor:<span class="hljs-comment"><span class="hljs-comment">#f0f0f0;</span></span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="php">$lineColor:#e8e8e8;
                 
                 
                
                

                
                
                 
                 
                
                
                
                
                 
                 
                  
                  $headerTextColor:<span class="hljs-comment"><span class="hljs-comment">#5c5c5c;</span></span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="25"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="php">$titleColor:#333333;
                 
                 
                
                

                
                
                 
                 
                
                
                
                
                 
                 
                  
                  $circleColor:<span class="hljs-comment"><span class="hljs-comment">#FFF9c6;</span></span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="27"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="php"> </code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="28"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="php"> </code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="29"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"></div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><p>样式表：<code>base_layout.scss</code>:</p><pre onclick="hljs.copyCode(event)"><code class="language-java hljs"><ol class="hljs-ln hundred"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java"><span class="hljs-comment"><span class="hljs-comment">//基础布局文件</span></span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java"><span class="hljs-meta"><span class="hljs-meta">@import</span></span> <span class="hljs-string"><span class="hljs-string">"base"</span></span>;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java"> </code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">%flex{</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">  flex: <span class="hljs-number"><span class="hljs-number">1</span></span>;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">  -webkit-flex: <span class="hljs-number"><span class="hljs-number">1</span></span>;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java"> </code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">.base {</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">  display: flex;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">  display: -webkit-flex;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java"> </code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java"><span class="hljs-comment"><span class="hljs-comment">//横向布局</span></span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">.base_row {</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">  <span class="hljs-meta"><span class="hljs-meta">@extend</span></span> .base;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">  flex-direction: row; -webkit-flex-direction: row;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java"> </code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java"><span class="hljs-comment"><span class="hljs-comment">//竖向布局</span></span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">.base_column{</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="22"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">  <span class="hljs-meta"><span class="hljs-meta">@extend</span></span> .base;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">  flex-direction: column; -webkit-flex-direction: column;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="24"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="25"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java"> </code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="26"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java"><span class="hljs-meta"><span class="hljs-meta">@mixin</span></span> justify-content($layout:center){
                 
                 
                
                

                
                
                 
                 
                
                
                
                
                 
                 
                  
                    justify-content: $layout;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="28"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">  -webkit-justify-content: $layout;
                 
                 
                
                

                
                
                 
                 
                
                
                
                
                 
                 
                  
                  }
                 
                 
                
                

                
                
                 
                 
                
                
                
                
                 
                 
                  
                   
                 
                 
                
                

                
                
                 
                 
                
                
                
                
                 
                 
                  
                  @mixin align-items($layout:center){</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="32"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">  align-items: $layout;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="33"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">  -webkit-align-items: $layout;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="34"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="35"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java"> </code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="36"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java"><span class="hljs-meta"><span class="hljs-meta">@mixin</span></span> get_font_size($fontSize:14px){
                 
                 
                
                

                
                
                 
                 
                
                
                
                
                 
                 
                  
                    font-size: $fontSize;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="38"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="39"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java"> </code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="40"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java"><span class="hljs-comment"><span class="hljs-comment">//竖向居中对齐</span></span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="41"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">.base_column_justify_center {</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="42"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">  <span class="hljs-meta"><span class="hljs-meta">@extend</span></span> .base_column;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="43"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">  <span class="hljs-meta"><span class="hljs-meta">@include</span></span> justify-content(center);</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="44"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="45"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java"> </code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="46"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java"><span class="hljs-comment"><span class="hljs-comment">//横向居中对齐</span></span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="47"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">.base_row_justify_center {</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="48"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">  <span class="hljs-meta"><span class="hljs-meta">@extend</span></span> .base_row;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="49"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">  <span class="hljs-meta"><span class="hljs-meta">@include</span></span> justify-content(center);</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="50"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="51"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java"> </code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="52"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java"><span class="hljs-comment"><span class="hljs-comment">//竖向垂直居中齐</span></span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="53"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">.base_column_align_center {</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="54"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">  <span class="hljs-meta"><span class="hljs-meta">@extend</span></span> .base_column;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="55"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">  <span class="hljs-meta"><span class="hljs-meta">@include</span></span> align-items(center);</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="56"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="57"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java"> </code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="58"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java"><span class="hljs-comment"><span class="hljs-comment">//横向垂直居中对齐</span></span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="59"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">.base_row_align_center {</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="60"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">  <span class="hljs-meta"><span class="hljs-meta">@extend</span></span> .base_row;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="61"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">  <span class="hljs-meta"><span class="hljs-meta">@include</span></span> align-items(center);</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="62"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="63"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java"> </code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="64"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java"><span class="hljs-comment"><span class="hljs-comment">//居中</span></span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="65"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">.base_center {</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="66"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">  <span class="hljs-meta"><span class="hljs-meta">@extend</span></span> .base;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="67"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">  <span class="hljs-meta"><span class="hljs-meta">@include</span></span> justify-content(center);</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="68"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">  <span class="hljs-meta"><span class="hljs-meta">@include</span></span> align-items(center);</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="69"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="70"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java"> </code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="71"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">.base_row_justify_space-between{</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="72"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">  <span class="hljs-meta"><span class="hljs-meta">@extend</span></span> .base_row;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="73"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">  <span class="hljs-meta"><span class="hljs-meta">@include</span></span> justify-content(space-between);</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="74"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="75"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java"> </code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="76"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">.base_row_title_layout{</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="77"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">  <span class="hljs-meta"><span class="hljs-meta">@extend</span></span> .base_row_align_center;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="78"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">  <span class="hljs-meta"><span class="hljs-meta">@include</span></span> justify-content(space-between);</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="79"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">}</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="80"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java"> </code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="81"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java"><span class="hljs-comment"><span class="hljs-comment">//页面container根布局</span></span></code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="82"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">.page_container {</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="83"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">  flex: <span class="hljs-number"><span class="hljs-number">1</span></span>;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="84"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">  -webkit-flex: <span class="hljs-number"><span class="hljs-number">1</span></span>;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="85"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">  flex-direction: column; -webkit-flex-direction: column;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="86"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">  display: flex;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="87"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">  display: -webkit-flex;</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="88"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code class="java">  background: $backgroundColor;
                 
                 
                
                

                
                
                 
                 
                
                
                
                
                 
                 
                  
                    font-size: 15px;
                 
                 
                
                

                
                
                 
                 
                
                
                
                
                 
                 
                  
                  }
                 
                 
                
                

                
                
                 
                 
                
                
                
                
                 
                 
                  
                   
                 
                 
                
                

                
                
                 
                 
                
                
                
                
                 
                 
                  
                  .page_context {
                 
                 
                
                

                
                
                 
                 
                
                
                
                
                 
                 
                  
                    @extend .base_column;
                 
                 
                
                

                
                
                 
                 
                
                
                
                
                 
                 
                  
                    @extend %flex;
                 
                 
                
                

                
                
                 
                 
                
                
                
                
                 
                 
                  
                    overflow: scroll;
                 
                 
                
                

                
                
                 
                 
                
                
                
                
                 
                 
                  
                    overflow-scrolling: touch;
                 
                 
                
                

                
                
                 
                 
                
                
                
                
                 
                 
                  
                    -webkit-overflow-scrolling: touch;
                 
                 
                
                

                
                
                 
                 
                
                
                
                
                 
                 
                  
                    padding-bottom: 10px;
                 
                 
                
                

                
                
                 
                 
                
                
                
                
                 
                 
                  
                    overflow-x: hidden;
                 
                 
                
                

                
                
                 
                 
                
                
                
                
                 
                 
                  
                  }
                 
                 
                
                

                
                
                 
                 
                
                
                
                
                 
                 
                  
                   
                 
                 
                
                

                
                
                 
                 
                
                
                
                
                 
                 
                  
                  //如果有需要，自己添加...
                 
                 
                
                

                
                
                 
                 
                
                
                
                
                 
                 
                  
                   
                 
                 
                
                

                
                
                 
                 
                
                
                
                
                 
                 
                
                
              
              
1
             
             我们可以把一些常用个布局封装到base_layout.scss中，当使用的时候自己组装，使用，继承，扩展…

             
             
              
              
             
             
            
            
            
            

            
            
作者：雨飞飞雨
            
            
链接：https://www.jianshu.com/p/9631cef7ab1b
            
            
來源：简书
            
            
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
           
           
            
1
       
       
      
      
1

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/82582