SASS详解之编译输出的样式
来源:互联网 发布:淘宝自然排名优化 编辑:程序博客网 时间:2024/06/05 20:39
SASS是一种CSS预处理语言,没有装环境的话是不能被解析的。但是有了koala编译工具之后,解析SASS不需要环境也毫无压力了。SASS的输出格式有四种:嵌套、扩大、紧凑和压缩。下面结合小例子为大家一一介绍。
嵌套(:nested)
嵌套的风格是默认SASS风格,因为它反映的CSS样式和HTML文档的结构很相似。每个属性都有其自己的嵌套。嵌套式大型CSS文件时,看着是非常有用的,它可以让你轻松掌握文件的结构没有什么实际阅读。反而包含的选择器多了,看起来很是费劲。小例子如下
SASS代码
div { font-size: 14px; font-family: "Arial"; } div a { color: red; } div a:hover { text-decoration: underline; }
编译后的CSS代码
div { font-size: 14px; font-family: "Arial";}div a { color: red;}div a:hover { text-decoration: underline;}
展开(:expanded)
展开是一个比较典型的人类制造的CSS样式,每个属性和属性值占一行。小例子如下
SASS代码
div {font : {size :14px;family:"Arial";}a {color:red;&:hover {text:{decoration:underline;}}}}
编译后的CSS代码
div { font-size: 14px; font-family: "Arial";}div a { color: red;}div a:hover { text-decoration: underline;}
紧凑(:compact)
紧凑的风格比嵌套或展开占用的空间较少。每个CSS规则只占用一行,在该行定义每个属性。嵌套规则放置在属性旁边没有换行。小例子如下
SASS代码
div {font : {size :14px;family:"Arial";}a {color:red;&:hover {text:{decoration:underline;}}}}
编译后的CSS代码
div { font-size: 14px; font-family: "Arial"; }div a { color: red; }div a:hover { text-decoration: underline; }
压缩(:compressed)
压缩式占用空间的可能的最小量的,把不必要的空格都删除掉,然后每个属性,每个属性值,每个选择器仅仅挨在一起。小例子如下
SASS代码
div {font : {size :14px;family:"Arial";}a {color:red;&:hover {text:{decoration:underline;}}}}
编译后的CSS代码
div{font-size:14px;font-family:"Arial"}div a{color:red}div a:hover{text-decoration:underline}
SASS详解之编译输出的样式就为大家介绍到这里了,我们可以通过不同的输出样式来适用于不同地方,更加方便了大家的编辑需要。
- SASS详解之编译输出的样式
- webstorm配置编译sass的输出目录
- webstorm配置编译sass的输出目录
- Sass学习之路(4)——不同样式风格的输出方式
- Sass详解之编译工具koala
- gulp-sass编译无输出
- Sass 编译与不同风格的输出方式
- sass的输出风格
- SASS详解之简介
- SASS详解之准备工作
- SASS详解之变量($)
- Sass的编译环境
- sass的编译
- SASS的编译
- Sass-四种编译输出代码风格
- SASS详解之基本语法
- SASS详解之继承(extend)
- SASS详解之混合(mixins)
- adnroid4.0 下linux3.0的变化
- linux 多线程之顺序锁技术
- java对象及对象的引用
- 第十周项目2(从简单起)-计算1/2-2/3+3/4-4/5+...+19/20的值
- Cocos2d-x 背景音乐播放
- SASS详解之编译输出的样式
- Messagebox Shellcode (113 bytes) - Any Windows Version
- 导出excel,并支持分sheet导出
- webservice不识别的字符
- ibaties 中一对多映射关联查询
- hdu 1022 Train Problem I(栈)
- mysqldump命令详解
- Apache MINA 开发高性能网络应用程序
- 如何查阅自然语言处理领域学术资料