SCSS (三) | 变量与数据类型

<h1>变量</h1> <p>使用SassScript最直截了当的方法是使用变量。变量以美元符号开始,赋值像设置CSS属性那样</p> <pre><code>$width:5em; #main { width: $width; }</code></pre> <p>编译为</p> <pre><code>#main { width: 5em; }</code></pre> <p>作用域:不在任何嵌套选择器内定义的变量则在可任何地方使用,相当于全局变量,使用!global可以使一个变量成为全局变量</p> <pre><code>$width:5em !global;</code></pre> <p>嵌套在{}里的</p><!--autointro-->
分类: CSS
2019-04-21 22:23:53
浏览: 275
评论: 0

SCSS (二) | 嵌套规则与引用父选择器:&amp;

<h1>嵌套规则</h1> <p>CSS中有一些属性遵循相同的“命名空间”,在CSS中,如果你想在同一个命名空间中设置一串属性,你必须每次都输出来。Sass为此提供了一个快捷方式:只需要输入一次命名空间,然后在其内部嵌套子属性。</p> <pre><code>#main p { color: #00ff00; width: 97%; .redbox { background-color: #ff0000; color: #000000; } }</code></pre> <p>编译为</p> <pre><code> #m&lt;!--autointro--&gt;</code></pre><!--autointro-->
分类: CSS
2019-04-21 22:23:53
浏览: 199
评论: 0

SCSS (一) | 环境安装与IDE配置

<h1>Sass简介</h1> <p>Sass 是一个 CSS 的扩展,它在 CSS 语法的基础上,允许您使用变量 (variables), 嵌套规则 (nested rules), 混合 (mixins), 导入 (inline imports) 等功能,令 CSS 更加强大与优雅。使用 Sass 以及 Compass 样式库 有助于更好地组织管理样式文件,以及更高效地开发项目。</p> <h1>node-sass 安装</h1> <p>首先安装NodeJS,然后使用NPM安装node-sass</p> <pre><code> npm install&lt;!--autointro--&gt;</code></pre><!--autointro-->
分类: CSS
2019-04-21 22:23:53
浏览: 272
评论: 0