vue中scss用法
咱们这里用两个部分来讲明吧。javascript
1.如何学习Scss
2.如何使用Scssphp
1.如何学习Scss
学习Scss的第一步不是你要知道什么是Scss的概念啊什么的，而是找到一个合适的资源从头开始学习，我在这里推荐慕课网的资源Sass入门篇，还有Sass进阶篇，sass中文官网
你们学习完之后，基本上就什么会了。css
这里我整理一下它的一些重要的概念。基本上若是你知道这些，基本的使用就能够了。html
Sass是什么？
Sass并非其余的什么，而是CSS预处理器，预处理器就是定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增长了一些编程的特性，将CSS做为目标生成文件，而后开发者就只要使用这些语言进行编码工做。vue
果真，概念就不是给人看的。用CSS预处理器可让你的编码效率提升十倍。就是这样…java
还有不少其余的CSS预处理器，好比node
-
Sass（SCSS）
-
LESS
-
Stylus
-
Turbine
-
Swithch CSS
-
CSS Cacheer
-
DT CSS
其中最优秀的技师Sass、LESS和Stylus，在这里，咱们聊一下Sass.python
Sass 和 SCSS 有什么区别？
其实这两货说的是一个东东，因为一开始Sass规定的语法格式是严格的缩进式语法，不带大括号和分号，因此形成程序员在写sass的时候有很是大的不习惯，虽然它是最先的预处理器，却没有人家LESS用的人多，因此又支持了使用大括号和分号，这就是SCSS.react
1.文件扩展名不一样，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名webpack
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 //定义变量bodyfont: 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
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;
-
}
SASS环境的安装
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 οnclick="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;
!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 οnclick="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" οnclick="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" οnclick="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"><</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">header</span></span></span><span class="hljs-tag">></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"><</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">nav</span></span></span><span class="hljs-tag">></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"><</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">></span></span>Home<span class="hljs-tag"><span class="hljs-tag"></</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">a</span></span></span><span class="hljs-tag">></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"><</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">></span></span>About<span class="hljs-tag"><span class="hljs-tag"></</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">a</span></span></span><span class="hljs-tag">></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"><</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">></span></span>Blog<span class="hljs-tag"><span class="hljs-tag"></</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">a</span></span></span><span class="hljs-tag">></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"></</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">nav</span></span></span><span class="hljs-tag">></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"><</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">header</span></span></span><span class="hljs-tag">></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 οnclick="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" οnclick="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 & {</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 οnclick="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 οnclick="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>&</code>符号一块儿配合使用。咱们就拿经典的“clearfix”为例吧：</p><pre οnclick="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">&<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">&<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">&<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 οnclick="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" οnclick="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">选择器越具体则声明语句越冗长，并且对最近选择器的引用(&)也越频繁。在某些时候，出现混淆选择器路径和探索下一级选择器的错误率很高，这很是不值得。</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 οnclick="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 οnclick="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;}
3.复杂的混合宏
咱们能够在大括号里面写上逻辑关系
-
的参数数值大于或等于1时，表示有多个阴影值，反之调用默认的参数值
混合宏的调用
咱们经过关键词来调用声明好的混合宏，而后若是须要传参数，咱们就传入参数；
-
-
-
-
-
使用：
-
-
-
-
混合宏的参数
1.传一个不带值的参数
咱们在混合宏中，能够传一个不带任何值的参数：
-
,而后咱们在调用的时候给这个参数传值：
-
-
-
-
2.传一个带值的参数
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
咱们能够把一些经常使用个布局封装到中，当使用的时候本身组装，使用，继承，扩展…
做者：雨飞飞雨 连接：https://www.jianshu.com/p/9631cef7ab1b 來源：简书 著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。
@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) >= <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@include@mixin border-radius{-webkit-border-radius: 3px;border-radius: 3px;}button {@include border-radius;}@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);}@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 οnclick="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 οnclick="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 οnclick="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 οnclick="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 οnclick="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 οnclick="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 οnclick="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 οnclick="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 οnclick="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 οnclick="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 οnclick="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" οnclick="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 οnclick="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 οnclick="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 οnclick="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 οnclick="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文件进行加载，以及<style lang="sass">...</style>声明的内部样式进行加载</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 οnclick="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" οnclick="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"><</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">></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"></</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">style</span></span></span><span class="hljs-tag">></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 οnclick="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 οnclick="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;}//若是有须要，本身添加...base_layout.scss