如下例子：

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

id为content的div下面，有两个子节点，article和aside，其中article子节点下面又包含两个子节点h1和p.

如果用纯粹的css来编写，我们得一次又一次地重复#content这种层级结果。

用scss：使用大括号来描述层级结构：

#content {article {h1 { color: #333 }p { margin-bottom: 1.4em }}aside { background-color: #EEE }
}

使用scss不用重复维护#content的层级结构，而且scss源码可读性更好。编译之后：

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

SCSS 和 SASS 的区别

There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS) and used throughout this reference, is an extension of the syntax of CSS.

SCSS 是 CSS 语法的扩展.

This means that every valid CSS stylesheet is a valid SCSS file with the same meaning.

因此,每个合法的CSS文件也都是合法的SCSS文件.

This syntax is enhanced with the Sass features described below. Files using this syntax have the .scss extension.

The second and older syntax, known as the indented syntax (or sometimes just “Sass”), provides a more concise way of writing CSS. It uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties. Files using this syntax have the .sass extension.

.sass 扩展, 并不是SAP Spartacus里使用的scss. Sass 使用indentation(缩进), 而不是括号,来描述嵌套的selector, 使用newline来进行property分隔,而不是css里的分号, 使用sass扩展名,而不是scss.

scss支持的嵌套css规则相关推荐

css规则定义的分类,.css规则定义
文本样式的定义定义文本样式.保存CSS规则后系统将行动打开"CSS规则定义"对话框. [字体]:选择所需要的字体. [大小]:定义字体大小. [样式]:可选择字体的特殊样式,即& ...
css规则_CSS规则，将使您的生活更轻松
css规则 by Nick Gard 尼克·加德(Nick Gard) CSS规则,将使您的生活更轻松 (CSS rules that will make your life easier) Afte ...
css+less+scss,你只懂CSS？做前端你还要会 Less、Sass或Stylus
网站前端开发,CSS是必备的知识,但随着WEB项目越来越大,CSS的预处理越来越重要. 为什么需要CSS的预处理? CSS 是一门非程序式语言,没有变量.函数.SCOPE(作用域)等,要维护我们的CS ...
scss、sass 和 css 的区别
项目中,会经常使用诸如scss.sass的style样式,它们和css有什么区别呢? less大家应该都不陌生,同样的scss.sass一样,它们都可以称为:CSS预处理器语言. 简单来说,scss和 ...
CSS @规则（详细）
在 CSS 中包含两种语法规则: 普通规则:由选择器.属性和值构成,在之前的学习中我们主要使用的就是这种规则: @规则:以@开头后面跟随一个关键字的形式构成,也被称为"AT规则", ...
每个网页设计师应该知道的10条CSS规则
通过网页设计师的大量CSS经验,我们会记住所有种代码语法,兼容性和片段.有一些特定的CSS,可以真正帮助改变你的网站设计改变较旧的技术规则和声明.这里是我收集到的很有用的10条CSS规则 @media ...
让jquery easyui datagrid列支持绑定嵌套对象
嵌套对象是指返回的json数据,是对象的某个属性自带有属性.而我们恰恰又需要这个属性,默认情况下easyui的datagrid是不支持绑定嵌套对象的.比如:datagrid的field属性只能为fie ...
css规则中区块block,CSS的命名方式:BEM(区块、元素、修饰符)
原标题:CSS的命名方式:BEM(区块.元素.修饰符) 本资源由伯乐在线- 凝枫整理,您也想贡献一份力量?欢迎加入我们 » 重要概念 "Block"区块区块的定义是:一个逻辑和 ...
封装link或style中的css规则
CSSStyleSheet类型表示的是样式表,包括通过<link>元素包含的样式表和在<style>元素中定义的样式表.这两个元素本身分别是由HTMLLinkElement和H ...

scss支持的嵌套css规则

SCSS 和 SASS 的区别

scss支持的嵌套css规则相关推荐

最新文章

热门文章