首页
导航
博客
电子书
算法
众创
代码
随贴
关于我们
您好，欢迎来到码863代码分享网！ 请
[登录]
/
[注册]
搜 索
标题：
*
140
字
TAG标签：
（用空格隔开）
30
字
恢复历史版本：
请选择分类
html
python
javascript
php
sql
c
c++
c#
java
plain
所有人可见
仅自己可见
编辑器:UEditor
编辑器:TinyMCE
编辑器:Editor.md
HTML转MD
HTML转MD2
<p class="toc_title" style="margin-top: 0px; margin-bottom: 0px; font-size: 14px; font-weight: 700; line-height: 1.5; text-align: left; padding: 0px;"><a href="http://www.tfan.org/less-vs-scss/">http://www.tfan.org/less-vs-scss/</a><br/></p><ul class="toc_list list-paddingleft-2" style="list-style-type: none;"><li><p><a href="http://www.tfan.org/less-vs-scss/#LESS_SCSS" style="color: rgb(0, 136, 204); text-decoration-line: none; text-shadow: none;"><span class="toc_number toc_depth_1"></span></a></p></li></ul><header class="entry-header" style="color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; font-size: 13px; white-space: normal; background-color: rgb(255, 255, 255);"><h1 class="entry-title" style="margin: 10px 0px; font-family: inherit; line-height: 36px; color: inherit; text-rendering: optimizelegibility; font-size: 28px; clear: both;"><br/></h1></header><p class="toc_title" style="margin-top: 0px; margin-bottom: 0px; font-size: 14px; font-weight: 700; line-height: 1.5; text-align: center; padding: 0px;">目录</p><ul class="toc_list list-paddingleft-2" style="list-style-type: none;"><li><p><a href="http://www.tfan.org/less-vs-scss/#LESS_SCSS" style="color: rgb(0, 136, 204); text-decoration-line: none; text-shadow: none;"><span class="toc_number toc_depth_1">1</span> LESS 和 SCSS 的区别</a></p></li><ul style="list-style-type: circle;" class=" list-paddingleft-2"><li><p><a href="http://www.tfan.org/less-vs-scss/#i-8" style="color: rgb(0, 136, 204); text-decoration-line: none; text-shadow: none;"><span class="toc_number toc_depth_3">1.6.1</span> 引用父选择器 & 符号的使用</a></p></li><li><p><a href="http://www.tfan.org/less-vs-scss/#SCSS_LESS_CSS_Guard_if_when_8230_SCSS" style="color: rgb(0, 136, 204); text-decoration-line: none; text-shadow: none;"><span class="toc_number toc_depth_3">1.6.2</span> SCSS 不支持 LESS 中的 CSS Guard 功能，比如 if, when …，在 SCSS 中需要换种方式实现。</a></p></li><li><p><a href="http://www.tfan.org/less-vs-scss/#SCSS_default_Rule" style="color: rgb(0, 136, 204); text-decoration-line: none; text-shadow: none;"><span class="toc_number toc_depth_3">1.6.3</span> SCSS 支持 !default，一般是用在基础 Rule 的声明中，告诉使用者这是可以被覆盖的。</a></p></li><li><p><a href="http://www.tfan.org/less-vs-scss/#_extend" style="color: rgb(0, 136, 204); text-decoration-line: none; text-shadow: none;"><span class="toc_number toc_depth_3">1.6.4</span> 有关 extend</a></p></li><li><p><a href="http://www.tfan.org/less-vs-scss/#_JavaScript" style="color: rgb(0, 136, 204); text-decoration-line: none; text-shadow: none;"><span class="toc_number toc_depth_3">1.6.5</span> 集成 JavaScript 功能的方式</a></p></li><li><p><a href="http://www.tfan.org/less-vs-scss/#i-9" style="color: rgb(0, 136, 204); text-decoration-line: none; text-shadow: none;"><span class="toc_number toc_depth_3">1.6.6</span> 共享此文章：</a></p></li><li><p><a href="http://www.tfan.org/less-vs-scss/#i-10" style="color: rgb(0, 136, 204); text-decoration-line: none; text-shadow: none;"><span class="toc_number toc_depth_3">1.6.7</span> 相关</a></p></li><li><p><a href="http://www.tfan.org/less-vs-scss/#i-4" style="color: rgb(0, 136, 204); text-decoration-line: none; text-shadow: none;"><span class="toc_number toc_depth_3">1.4.1</span> 字符串函数</a></p></li><li><p><a href="http://www.tfan.org/less-vs-scss/#i-5" style="color: rgb(0, 136, 204); text-decoration-line: none; text-shadow: none;"><span class="toc_number toc_depth_3">1.4.2</span> 颜色函数</a></p></li><li><p><a href="http://www.tfan.org/less-vs-scss/#i-6" style="color: rgb(0, 136, 204); text-decoration-line: none; text-shadow: none;"><span class="toc_number toc_depth_3">1.4.3</span> 数学函数</a></p></li><li><p><a href="http://www.tfan.org/less-vs-scss/#_Mixin" style="color: rgb(0, 136, 204); text-decoration-line: none; text-shadow: none;"><span class="toc_number toc_depth_3">1.3.1</span> 定义一个 Mixin</a></p></li><li><p><a href="http://www.tfan.org/less-vs-scss/#_Mixin-2" style="color: rgb(0, 136, 204); text-decoration-line: none; text-shadow: none;"><span class="toc_number toc_depth_3">1.3.2</span> 使用 Mixin</a></p></li><li><p><a href="http://www.tfan.org/less-vs-scss/#i-2" style="color: rgb(0, 136, 204); text-decoration-line: none; text-shadow: none;"><span class="toc_number toc_depth_3">1.3.3</span> 参数形式</a></p></li><li><p><a href="http://www.tfan.org/less-vs-scss/#i" style="color: rgb(0, 136, 204); text-decoration-line: none; text-shadow: none;"><span class="toc_number toc_depth_2">1.1</span> 声明和使用变量</a></p></li><li><p><a href="http://www.tfan.org/less-vs-scss/#Variable_Interpolation" style="color: rgb(0, 136, 204); text-decoration-line: none; text-shadow: none;"><span class="toc_number toc_depth_2">1.2</span> 变量插值（Variable Interpolation）</a></p></li><li><p><a href="http://www.tfan.org/less-vs-scss/#Mixins" style="color: rgb(0, 136, 204); text-decoration-line: none; text-shadow: none;"><span class="toc_number toc_depth_2">1.3</span> Mixins 的定义、使用及参数</a></p></li><li><p><a href="http://www.tfan.org/less-vs-scss/#i-3" style="color: rgb(0, 136, 204); text-decoration-line: none; text-shadow: none;"><span class="toc_number toc_depth_2">1.4</span> 函数的使用</a></p></li><li><p><a href="http://www.tfan.org/less-vs-scss/#import" style="color: rgb(0, 136, 204); text-decoration-line: none; text-shadow: none;"><span class="toc_number toc_depth_2">1.5</span> @import 的实现</a></p></li><li><p><a href="http://www.tfan.org/less-vs-scss/#i-7" style="color: rgb(0, 136, 204); text-decoration-line: none; text-shadow: none;"><span class="toc_number toc_depth_2">1.6</span> 其他区别</a></p></li></ul></ul><h1 style="margin: 0px 0px 0.8125em; font-family: inherit; line-height: 36px; color: inherit; text-rendering: optimizelegibility; font-size: 28px; clear: both;"><span id="LESS_SCSS">LESS 和 SCSS 的区别</span></h1><ul class="toc_list list-paddingleft-2" style="list-style-type: none;"><span id="LESS_SCSS"></span><br/></ul><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">LESS 和 SCSS 都属于 CSS 预处理器的范畴，也就是 CSS 的超集，但是两者的语法、如何使用和具体的功能实现还是有差异的。</p><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">下面我试着以代码示例的方式给大家演示一下两者的几个常见区别。</p><h2 style="margin: 0px 0px 0.8125em; font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; line-height: 27px; color: rgb(51, 51, 51); text-rendering: optimizelegibility; font-size: 18px; clear: both; white-space: normal; background-color: rgb(255, 255, 255);"><span id="i">声明和使用变量</span></h2><blockquote style="padding: 0px 0px 0px 15px; margin: 0px 0px 20px; border-left: 5px solid rgb(238, 238, 238); color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255);"><p style="margin-top: 0px; margin-bottom: 0px; line-height: 1.5;">LESS 采用 @ 符号，SCSS 采用 $ 符号。</p></blockquote><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">在下面的示例中，我们首先在规则外声明了一个名为 link-color 的变量，然后在名为 #main 的规则内声明一个名为 width 的变量，接着把 width 变量赋值给了 CSS 的 width 属性。</p><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">LESS：</p><pre style="padding: 9.5px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 0px; margin-bottom: 10px; line-height: 20px; word-break: break-all; overflow-wrap: break-word; white-space: pre-wrap; background-color: rgb(245, 245, 245); border: 1px solid rgba(0, 0, 0, 0.15);">@link-color: #428bca; #main { @width: 5em; width: @width; }</pre><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">SCSS：</p><pre style="padding: 9.5px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 0px; margin-bottom: 10px; line-height: 20px; word-break: break-all; overflow-wrap: break-word; white-space: pre-wrap; background-color: rgb(245, 245, 245); border: 1px solid rgba(0, 0, 0, 0.15);">$link-color: #428bca; #main { $width: 5em; width: $width; }</pre><h2 style="margin: 0px 0px 0.8125em; font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; line-height: 27px; color: rgb(51, 51, 51); text-rendering: optimizelegibility; font-size: 18px; clear: both; white-space: normal; background-color: rgb(255, 255, 255);"><span id="Variable_Interpolation">变量插值（Variable Interpolation）</span></h2><blockquote style="padding: 0px 0px 0px 15px; margin: 0px 0px 20px; border-left: 5px solid rgb(238, 238, 238); color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255);"><p style="margin-top: 0px; margin-bottom: 0px; line-height: 1.5;">LESS 采用 @{xxxx} 的形式，SCSS 采用 ${xxxx} 的形式。</p></blockquote><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">示例一：使用变量插值作为 CSS 选择器</p><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">LESS：</p><pre style="padding: 9.5px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 0px; margin-bottom: 10px; line-height: 20px; word-break: break-all; overflow-wrap: break-word; white-space: pre-wrap; background-color: rgb(245, 245, 245); border: 1px solid rgba(0, 0, 0, 0.15);">// Variables @my-selector: banner; // Usage .@{my-selector} { font-weight: bold; line-height: 40px; margin: 0 auto; }</pre><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">SCSS：</p><pre style="padding: 9.5px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 0px; margin-bottom: 10px; line-height: 20px; word-break: break-all; overflow-wrap: break-word; white-space: pre-wrap; background-color: rgb(245, 245, 245); border: 1px solid rgba(0, 0, 0, 0.15);">// Variables $my-selector: banner; // Usage .#{$my-selector} { font-weight: bold; line-height: 40px; margin: 0 auto; }</pre><h2 style="margin: 0px 0px 0.8125em; font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; line-height: 27px; color: rgb(51, 51, 51); text-rendering: optimizelegibility; font-size: 18px; clear: both; white-space: normal; background-color: rgb(255, 255, 255);"><span id="Mixins">Mixins 的定义、使用及参数</span></h2><h3 style="margin: 10px 0px; font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; line-height: 36px; color: rgb(51, 51, 51); text-rendering: optimizelegibility; font-size: 14px; clear: both; white-space: normal; background-color: rgb(255, 255, 255);"><span id="_Mixin">定义一个 Mixin</span></h3><blockquote style="padding: 0px 0px 0px 15px; margin: 0px 0px 20px; border-left: 5px solid rgb(238, 238, 238); color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255);"><p style="margin-top: 0px; margin-bottom: 0px; line-height: 1.5;">LESS 使用 dot 符号（也就是句点）来定义一个 Mixin，并且可以把任意的 CSS 规则作为 Mixin 使用；SCSS 使用 @mixin 指令来定义一个 Mixin。</p></blockquote><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">示例 – 来自 BootStrap 的 alert-variant Mixin 的定义</p><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">LESS：</p><pre style="padding: 9.5px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 0px; margin-bottom: 10px; line-height: 20px; word-break: break-all; overflow-wrap: break-word; white-space: pre-wrap; background-color: rgb(245, 245, 245); border: 1px solid rgba(0, 0, 0, 0.15);">.alert-variant(@background; @border; @text-color) { background-color: @background; border-color: @border; color: @text-color; hr { border-top-color: darken(@border, 5%); } .alert-link { color: darken(@text-color, 10%); } }</pre><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">SCSS：</p><pre style="padding: 9.5px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 0px; margin-bottom: 10px; line-height: 20px; word-break: break-all; overflow-wrap: break-word; white-space: pre-wrap; background-color: rgb(245, 245, 245); border: 1px solid rgba(0, 0, 0, 0.15);">@mixin alert-variant($background, $border, $text-color) { background-color: $background; border-color: $border; color: $text-color; hr { border-top-color: darken($border, 5%); } .alert-link { color: darken($text-color, 10%); } }</pre><h3 style="margin: 10px 0px; font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; line-height: 36px; color: rgb(51, 51, 51); text-rendering: optimizelegibility; font-size: 14px; clear: both; white-space: normal; background-color: rgb(255, 255, 255);"><span id="_Mixin-2">使用 Mixin</span></h3><blockquote style="padding: 0px 0px 0px 15px; margin: 0px 0px 20px; border-left: 5px solid rgb(238, 238, 238); color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255);"><p style="margin-top: 0px; margin-bottom: 0px; line-height: 1.5;">LESS 仍是使用 dot 符号（句点），如果 Mixin 没有参数的话可以省略后面的圆括号；SCSS 使用 @include 指令来引入一个 Mixin。</p></blockquote><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">示例 – 引入一个名为 center-block 的 Mixin。</p><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">LESS：</p><pre style="padding: 9.5px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 0px; margin-bottom: 10px; line-height: 20px; word-break: break-all; overflow-wrap: break-word; white-space: pre-wrap; background-color: rgb(245, 245, 245); border: 1px solid rgba(0, 0, 0, 0.15);">.center-block() { display: block; margin-left: auto; margin-right: auto; } .a { .center-block; }</pre><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">SCSS：</p><pre style="padding: 9.5px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 0px; margin-bottom: 10px; line-height: 20px; word-break: break-all; overflow-wrap: break-word; white-space: pre-wrap; background-color: rgb(245, 245, 245); border: 1px solid rgba(0, 0, 0, 0.15);">@mixin center-block() { display: block; margin-left: auto; margin-right: auto; } .a { @include center-block; }</pre><h3 style="margin: 10px 0px; font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; line-height: 36px; color: rgb(51, 51, 51); text-rendering: optimizelegibility; font-size: 14px; clear: both; white-space: normal; background-color: rgb(255, 255, 255);"><span id="i-2">参数形式</span></h3><blockquote style="padding: 0px 0px 0px 15px; margin: 0px 0px 20px; border-left: 5px solid rgb(238, 238, 238); color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255);"><p style="margin-top: 0px; margin-bottom: 0px; line-height: 1.5;">如果存在多个参数的话，LESS 使用分号分隔；SCSS 使用逗号分隔。两者都支持为参数设置默认值。</p></blockquote><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">示例 – 来在 BootStrap 的 form-control-validation Mixin 的使用</p><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">LESS：</p><pre style="padding: 9.5px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 0px; margin-bottom: 10px; line-height: 20px; word-break: break-all; overflow-wrap: break-word; white-space: pre-wrap; background-color: rgb(245, 245, 245); border: 1px solid rgba(0, 0, 0, 0.15);">@state-success-text: #3c763d; @state-success-bg: #dff0d8; @state-success-border: darken(spin(@state-success-bg, -10), 5%); @state-info-text: #31708f; @state-info-bg: #d9edf7; @state-info-border: darken(spin(@state-info-bg, -10), 7%); @state-warning-text: #8a6d3b; @state-warning-bg: #fcf8e3; @state-warning-border: darken(spin(@state-warning-bg, -10), 5%); @state-danger-text: #a94442; @state-danger-bg: #f2dede; @state-danger-border: darken(spin(@state-danger-bg, -10), 5%); .box-shadow(@shadow) { -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1 box-shadow: @shadow; } .form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) { // Color the label and help text .help-block, .control-label, .radio, .checkbox, .radio-inline, .checkbox-inline, &.radio label, &.checkbox label, &.radio-inline label, &.checkbox-inline label { color: @text-color; } // Set the border and box shadow on specific inputs to match .form-control { border-color: @border-color; .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work &:focus { border-color: darken(@border-color, 10%); @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%); .box-shadow(@shadow); } } // Set validation states also for addons .input-group-addon { color: @text-color; border-color: @border-color; background-color: @background-color; } // Optional feedback icon .form-control-feedback { color: @text-color; } } // Feedback states .has-success { .form-control-validation(@state-success-text; @state-success-text; @state-success-bg); } .has-warning { .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg); } .has-error { .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg); }</pre><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">SCSS：</p><pre style="padding: 9.5px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 0px; margin-bottom: 10px; line-height: 20px; word-break: break-all; overflow-wrap: break-word; white-space: pre-wrap; background-color: rgb(245, 245, 245); border: 1px solid rgba(0, 0, 0, 0.15);">$state-success-text: #3c763d; $state-success-bg: #dff0d8; $state-success-border: darken(adjust_hue($state-success-bg, -10), 5%); $state-info-text: #31708f; $state-info-bg: #d9edf7; $state-info-border: darken(adjust_hue($state-info-bg, -10), 7%); $state-warning-text: #8a6d3b; $state-warning-bg: #fcf8e3; $state-warning-border: darken(adjust_hue($state-warning-bg, -10), 5%); $state-danger-text: #a94442; $state-danger-bg: #f2dede; $state-danger-border: darken(adjust_hue($state-danger-bg, -10), 5%); @mixin box-shadow($shadow) { -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1 box-shadow: $shadow; } @mixin form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) { // Color the label and help text .help-block, .control-label, .radio, .checkbox, .radio-inline, .checkbox-inline, &.radio label, &.checkbox label, &.radio-inline label, &.checkbox-inline label { color: $text-color; } // Set the border and box shadow on specific inputs to match .form-control { border-color: $border-color; @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work &:focus { border-color: darken($border-color, 10%); $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%); @include box-shadow($shadow); } } // Set validation states also for addons .input-group-addon { color: $text-color; border-color: $border-color; background-color: $background-color; } // Optional feedback icon .form-control-feedback { color: $text-color; } } // Feedback states .has-success { @include form-control-validation($state-success-text, $state-success-text, $state-success-bg); } .has-warning { @include form-control-validation($state-warning-text, $state-warning-text, $state-warning-bg); } .has-error { @include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg); }</pre><h2 style="margin: 0px 0px 0.8125em; font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; line-height: 27px; color: rgb(51, 51, 51); text-rendering: optimizelegibility; font-size: 18px; clear: both; white-space: normal; background-color: rgb(255, 255, 255);"><span id="i-3">函数的使用</span></h2><h3 style="margin: 10px 0px; font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; line-height: 36px; color: rgb(51, 51, 51); text-rendering: optimizelegibility; font-size: 14px; clear: both; white-space: normal; background-color: rgb(255, 255, 255);"><span id="i-4">字符串函数</span></h3><blockquote style="padding: 0px 0px 0px 15px; margin: 0px 0px 20px; border-left: 5px solid rgb(238, 238, 238); color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255);"><p style="margin-top: 0px; margin-bottom: 0px; line-height: 1.5;">LESS 使用 e 或者 ~”xxxx” 这种语法进行 CSS 转义；SCSS 本身并没有提供 CSS 转义的函数，中要达到相同的效果可以使用变量插值（Variable Interpolation）实现。</p></blockquote><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">示例 – CSS 转义</p><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">LESS：</p><pre style="padding: 9.5px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 0px; margin-bottom: 10px; line-height: 20px; word-break: break-all; overflow-wrap: break-word; white-space: pre-wrap; background-color: rgb(245, 245, 245); border: 1px solid rgba(0, 0, 0, 0.15);">@input-border-focus: #66afe9; .box-shadow(@shadow) { -webkit-box-shadow: @shadow; // iOS &lt;4.3 & Android &lt;4.1 box-shadow: @shadow; } .form-control-focus(@color: @input-border-focus) { @color-rgba: rgba(red(@color), green(@color), blue(@color), .6); &:focus { border-color: @color; outline: 0; .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}"); } } .form-control { .form-control-focus(); }</pre><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">SCSS：</p><pre style="padding: 9.5px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 0px; margin-bottom: 10px; line-height: 20px; word-break: break-all; overflow-wrap: break-word; white-space: pre-wrap; background-color: rgb(245, 245, 245); border: 1px solid rgba(0, 0, 0, 0.15);">$input-border-focus: #66afe9; @mixin box-shadow($shadow) { -webkit-box-shadow: $shadow; // iOS &lt;4.3 & Android &lt;4.1 box-shadow: $shadow; } @mixin form-control-focus($color: $input-border-focus) { $color-rgba: rgba(red($color), green($color), blue($color), .6); &:focus { border-color: $color; outline: 0; @include box-shadow(#{inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $color-rgba}); } } .form-control { @include form-control-focus(); }</pre><h3 style="margin: 10px 0px; font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; line-height: 36px; color: rgb(51, 51, 51); text-rendering: optimizelegibility; font-size: 14px; clear: both; white-space: normal; background-color: rgb(255, 255, 255);"><span id="i-5">颜色函数</span></h3><blockquote style="padding: 0px 0px 0px 15px; margin: 0px 0px 20px; border-left: 5px solid rgb(238, 238, 238); color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255);"><p style="margin-top: 0px; margin-bottom: 0px; line-height: 1.5;">调节色相，LESS 使用名为 spin() 的函数；SCSS 使用名为 adjust_hue() 的函数。</p></blockquote><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">示例 – 调节色相</p><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">LESS：</p><pre style="padding: 9.5px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 0px; margin-bottom: 10px; line-height: 20px; word-break: break-all; overflow-wrap: break-word; white-space: pre-wrap; background-color: rgb(245, 245, 245); border: 1px solid rgba(0, 0, 0, 0.15);">@state-success-border: darken(spin(@state-success-bg, -10), 5%);</pre><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">SCSS：</p><pre style="padding: 9.5px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 0px; margin-bottom: 10px; line-height: 20px; word-break: break-all; overflow-wrap: break-word; white-space: pre-wrap; background-color: rgb(245, 245, 245); border: 1px solid rgba(0, 0, 0, 0.15);">$state-success-border: darken(adjust_hue($state-success-bg, -10), 5%);</pre><h3 style="margin: 10px 0px; font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; line-height: 36px; color: rgb(51, 51, 51); text-rendering: optimizelegibility; font-size: 14px; clear: both; white-space: normal; background-color: rgb(255, 255, 255);"><span id="i-6">数学函数</span></h3><blockquote style="padding: 0px 0px 0px 15px; margin: 0px 0px 20px; border-left: 5px solid rgb(238, 238, 238); color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255);"><p style="margin-top: 0px; margin-bottom: 0px; line-height: 1.5;">LESS 提供了一些 SCSS 中并不具备的数学函数，在 SCSS 中只能通过自定义函数实现，然后通过 node-sass 的接口传递给编译器。</p></blockquote><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">示例 – 数学函数</p><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">SCSS：</p><pre style="padding: 9.5px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 0px; margin-bottom: 10px; line-height: 20px; word-break: break-all; overflow-wrap: break-word; white-space: pre-wrap; background-color: rgb(245, 245, 245); border: 1px solid rgba(0, 0, 0, 0.15);">// rotate for ie8 and blow @mixin ie-rotate($rotation) { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation})"; } // rotate for ie8 and blow // degrees unit @mixin ie-rotate-via-degrees($degrees) { /* IE6-IE8 */ $radians: parseInt("#{$degrees}") * PI() * 2 / 360; $costheta: cos("#{$radians}"); $sintheta: sin("#{$radians}"); $negsintheta: "#{$sintheta}" * -1; -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=@{costheta}, M12=@{negsintheta}, M21=@{sintheta}, M22=@{costheta})"; zoom: 1; :root & { filter: none; } } // support rotate for all browsers @mixin cross-rotate($degrees) { @include rotate($degrees); @include ie-rotate-via-degrees($degrees); } // Placeholder text @mixin placeholder($color: $input-placeholder-color) { // Firefox &::-moz-placeholder { color: $color; opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526 } // Internet Explorer 10+ &:-ms-input-placeholder { color: $color; } // Safari and Chrome &::-webkit-input-placeholder { color: $color; } }</pre><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">上述 Math 实现所需的 JS 文件：</p><pre style="padding: 9.5px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 0px; margin-bottom: 10px; line-height: 20px; word-break: break-all; overflow-wrap: break-word; white-space: pre-wrap; background-color: rgb(245, 245, 245); border: 1px solid rgba(0, 0, 0, 0.15);">module.exports = { 'parseInt($str)': function (str) { return parseInt(str, 10); }, 'Math.sin($degree)': function (degree) { return Math.sin(degree); }, 'Math.cos($degree)': function (degree) { return Math.cos(degree); }, 'Math.PI': Math.PI }</pre><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">有关函数的区别还有：</p><ol style="padding: 0px; margin-bottom: 10px; margin-left: 25px; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li><p>LESS 的 fade() 函数在 SCSS 中只能使用 rgba() 之类的实现，因为 SCSS 也没有这个函数。</p></li></ol><h2 style="margin: 0px 0px 0.8125em; font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; line-height: 27px; color: rgb(51, 51, 51); text-rendering: optimizelegibility; font-size: 18px; clear: both; white-space: normal; background-color: rgb(255, 255, 255);"><span id="import">@import 的实现</span></h2><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">像 @media, @import 这些带 @ 符号的在 CSS 中都称为 At-rules。<br/>值的一提的是 LESS 和 SCSS 对@import 实现的区别。</p><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">LESS 的 @import 对文件扩展名的处理：</p><ul style="padding: 0px; margin-bottom: 10px; margin-left: 25px; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li><p>如果扩展名为 .css，将文件识别为 CSS 文件</p></li><li><p>其他任何扩展名都将被作为 LESS 文件处理</p></li><li><p>没有扩展名会被附加一个 .less 的扩展名并且作为 LESS 文件处理</p></li></ul><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">SCSS 的 @import 实现对文件扩展名的处理：</p><ul style="padding: 0px; margin-bottom: 10px; margin-left: 25px; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li><p>默认情况下，SCSS 的 @import 实现会试图寻找一个 Sass 文件进行导入。</p></li><li><p>但是在下列情况出现时，@import 会直接被编译为 CSS 的 @import at-rule</p></li><ul style="list-style-type: square;" class=" list-paddingleft-2"><li><p>文件扩展名是 .css</p></li><li><p>文件以 http:// 开头</p></li><li><p>文件名是一个 url()</p></li><li><p>@import 具有媒体查询</p></li></ul><li><p>SCSS 按约定认为下划线开始的文件是内联文件，不会被编译为单独的 CSS 文件输出。</p></li></ul><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">示例 – 使用 @import</p><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">LESS：</p><pre style="padding: 9.5px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 0px; margin-bottom: 10px; line-height: 20px; word-break: break-all; overflow-wrap: break-word; white-space: pre-wrap; background-color: rgb(245, 245, 245); border: 1px solid rgba(0, 0, 0, 0.15);">@import "foo"; @import "bar.less"; @import "foo.php"; // 当成 LESS 文件处理 @import "foo.css";</pre><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">SCSS：</p><pre style="padding: 9.5px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 0px; margin-bottom: 10px; line-height: 20px; word-break: break-all; overflow-wrap: break-word; white-space: pre-wrap; background-color: rgb(245, 245, 245); border: 1px solid rgba(0, 0, 0, 0.15);">@import "foo"; @import "foo.scss";</pre><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">都会导入 foo.scss 文件。</p><h2 style="margin: 0px 0px 0.8125em; font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; line-height: 27px; color: rgb(51, 51, 51); text-rendering: optimizelegibility; font-size: 18px; clear: both; white-space: normal; background-color: rgb(255, 255, 255);"><span id="i-7">其他区别</span></h2><h3 style="margin: 10px 0px; font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; line-height: 36px; color: rgb(51, 51, 51); text-rendering: optimizelegibility; font-size: 14px; clear: both; white-space: normal; background-color: rgb(255, 255, 255);"><span id="i-8">引用父选择器 & 符号的使用</span></h3><blockquote style="padding: 0px 0px 0px 15px; margin: 0px 0px 20px; border-left: 5px solid rgb(238, 238, 238); color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255);"><p style="margin-top: 0px; margin-bottom: 0px; line-height: 1.5;">LESS 和 SCSS 均使用 & 符号表示父选择器，但是 SCSS 的 & 符号只能出现在一个组合选择器的开始位置，LESS 则没有这个限制。</p></blockquote><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">示例 – & 选择器</p><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">LESS：</p><pre style="padding: 9.5px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 0px; margin-bottom: 10px; line-height: 20px; word-break: break-all; overflow-wrap: break-word; white-space: pre-wrap; background-color: rgb(245, 245, 245); border: 1px solid rgba(0, 0, 0, 0.15);">.bg-variant(@color) { background-color: @color; a&:hover, a&:focus { background-color: darken(@color, 10%); } }</pre><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">SCSS：</p><pre style="padding: 9.5px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 0px; margin-bottom: 10px; line-height: 20px; word-break: break-all; overflow-wrap: break-word; white-space: pre-wrap; background-color: rgb(245, 245, 245); border: 1px solid rgba(0, 0, 0, 0.15);">a { font-weight: bold; text-decoration: none; &:hover { text-decoration: underline; } body.firefox & { font-weight: normal; } }</pre><h3 style="margin: 10px 0px; font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; line-height: 36px; color: rgb(51, 51, 51); text-rendering: optimizelegibility; font-size: 14px; clear: both; white-space: normal; background-color: rgb(255, 255, 255);"><span id="SCSS_LESS_CSS_Guard_if_when_8230_SCSS">SCSS 不支持 LESS 中的 CSS Guard 功能，比如 if, when …，在 SCSS 中需要换种方式实现。</span></h3><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">LESS 示例：</p><pre style="padding: 9.5px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 0px; margin-bottom: 10px; line-height: 20px; word-break: break-all; overflow-wrap: break-word; white-space: pre-wrap; background-color: rgb(245, 245, 245); border: 1px solid rgba(0, 0, 0, 0.15);">.my-optional-style() when (@my-option = true) { button { color: white; } } .my-optional-style();</pre><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">Note：SCSS 需要换一种写法实现同样的功能。</p><h3 style="margin: 10px 0px; font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; line-height: 36px; color: rgb(51, 51, 51); text-rendering: optimizelegibility; font-size: 14px; clear: both; white-space: normal; background-color: rgb(255, 255, 255);"><span id="SCSS_default_Rule">SCSS 支持 !default，一般是用在基础 Rule 的声明中，告诉使用者这是可以被覆盖的。</span></h3><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">SCSS 示例：</p><pre style="padding: 9.5px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 0px; margin-bottom: 10px; line-height: 20px; word-break: break-all; overflow-wrap: break-word; white-space: pre-wrap; background-color: rgb(245, 245, 245); border: 1px solid rgba(0, 0, 0, 0.15);">$primary: $blue !default; $secondary: $gray-600 !default;</pre><h3 style="margin: 10px 0px; font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; line-height: 36px; color: rgb(51, 51, 51); text-rendering: optimizelegibility; font-size: 14px; clear: both; white-space: normal; background-color: rgb(255, 255, 255);"><span id="_extend">有关 extend</span></h3><blockquote style="padding: 0px 0px 0px 15px; margin: 0px 0px 20px; border-left: 5px solid rgb(238, 238, 238); color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255);"><p style="margin-top: 0px; margin-bottom: 0px; line-height: 1.5;">SCSS 不像 LESS 一样默认可以把 rule 作为 Mixin 使用，但是 SCSS 有类似的 @extend 指令；而 LESS 的 extend 语法看起来则像是伪类一样。</p></blockquote><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">示例：</p><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">LESS：</p><pre style="padding: 9.5px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 0px; margin-bottom: 10px; line-height: 20px; word-break: break-all; overflow-wrap: break-word; white-space: pre-wrap; background-color: rgb(245, 245, 245); border: 1px solid rgba(0, 0, 0, 0.15);">.error { border: 1px #f00; background-color: #fdd; } .seriousError { @extend .error; border-width: 3px; }</pre><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">SCSS ：</p><pre style="padding: 9.5px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 0px; margin-bottom: 10px; line-height: 20px; word-break: break-all; overflow-wrap: break-word; white-space: pre-wrap; background-color: rgb(245, 245, 245); border: 1px solid rgba(0, 0, 0, 0.15);">.error { border: 1px #f00; background-color: #fdd; } .seriousError { @extend .error; border-width: 3px; }</pre><h3 style="margin: 10px 0px; font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; line-height: 36px; color: rgb(51, 51, 51); text-rendering: optimizelegibility; font-size: 14px; clear: both; white-space: normal; background-color: rgb(255, 255, 255);"><span id="_JavaScript">集成 JavaScript 功能的方式</span></h3><blockquote style="padding: 0px 0px 0px 15px; margin: 0px 0px 20px; border-left: 5px solid rgb(238, 238, 238); color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255);"><p style="margin-top: 0px; margin-bottom: 0px; line-height: 1.5;">LESS 使用 @functions 指令，可以把 js 代码直接放到 ~<code style="padding: 2px 4px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(221, 17, 68); border-radius: 3px; background-color: rgb(247, 247, 249); border: 1px solid rgb(225, 225, 232);">xxx</code> 中间即可；SCSS 可以把 JS 代码放到一个单独的文件中，然后使用 node-sass编译的时候指定参数传给 node-sass。</p></blockquote><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">LESS 示例：<a href="https://github.com/ant-design/ant-design/blob/7fa05996957ef0eded21d810d71364d294ea947d/components/style/color/tinyColor.less" style="color: rgb(0, 136, 204); text-decoration-line: none;">ant-design/tinyColor.less</a></p><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">SCSS 示例：<br/><a href="https://github.com/princetoad/kant/blob/a1ad8db4ddcd3fa293f52cadb65d5b22c8d222d8/modern/style/mixins/Math.js" style="color: rgb(0, 136, 204); text-decoration-line: none;">kant/Math.js</a></p><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">编译命令：<code style="padding: 2px 4px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(221, 17, 68); border-radius: 3px; background-color: rgb(247, 247, 249); border: 1px solid rgb(225, 225, 232);">node-sass --output-style expanded --source-map true --precision 6 --functions components/style/custom.js components/button/style/index.scss components/button/style/index.css</code></p><p style="margin-top: 0px; margin-bottom: 1.625em; font-size: 14px; line-height: 1.5; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">最后两个：</p><ol style="padding: 0px; margin-bottom: 10px; margin-left: 25px; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li><p>LESS 支持 lazy evaluation，但是 SCSS 不支持，所以在 LESS 中可以先使用再定义，但是在 SCSS 中一定要先定义再使用。</p></li><li><p>SCSS 是不支持 Mixin 重载的, 也就是说 LESS 可以有同名但是参数个数不同的几个 Mixins, SCSS 同样名字的 Mixin 只能有一个.</p></li></ol><p><br/></p>
CopyRight 2002～2023 精通2100网 联系邮箱:qqtxt@163.com
版权所有:精通2100网
湘ICP备2023018646号-1
MYSQl共执行 4 个查询，用时 0.0021181106567383 秒，PHP脚本用时 0.005590 秒，占用内存 0.921 MB，Gzip 已启用
