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详解之编译输出的样式的更多相关文章

  1. LESS详解之编译LESS

      掌握LESS,必须先掌握LESS的编译.因为LESS是CSS预处理语言的一种,是一种动态语言.LESS可以运行在各种语言和环境中,包括浏览器端.服务器端等.就因为是一种CSS预处理语言,所以需要编 ...

  2. SASS详解之沿袭(extend)

    SASS详解之继承(extend) 每一个类名都有可能有另一个类名的所有样式和它自己的特定样式的.当一个div的身上有两个类名,一个是“one”,另一个是“two”的时候.如下 HTML代码 < ...

  3. SASS详解之混合(mixins)

    SASS详解之混合(mixins)可以出现在SASS的任何地方.有很多类名具有相同或者相似的样式,就可以用SASS中的混合(mixins)来进行编写,然后针对不同类名的不同样式逐一编写. 定义一个混合 ...

  4. 【转帖】windows命令行中java和javac、javap使用详解(java编译命令)

    windows命令行中java和javac.javap使用详解(java编译命令) 更新时间:2014年03月23日 11:53:15   作者:    我要评论 http://www.jb51.ne ...

  5. [Linux系统] (3)应用安装方式详解(编译安装、rpm包安装、yum安装)

    软件的安装方式: 编译安装 RPM包安装 yum安装 一.编译安装 1.下载一个源码安装包:tengine-2.3.0.tar.gz.这是淘宝二次开发过的nginx.将其解压. .tar.gz 2.查 ...

  6. 【转】Android编译系统详解(三)——编译流程详解

    原文网址:http://www.cloudchou.com/android/post-276.html 本文原创作者:Cloud Chou. 欢迎转载,请注明出处和本文链接 1.概述 编译Androi ...

  7. 详解CSS设置默认字体样式

    浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏 ...

  8. 详解Bootstrap 定义按钮的样式(CSS)

    以下样式可用于<a>, <button>, 或 <input> 元素上: 更多关于Bootstrap 定义CSS样式的可查看:http://v2.bootcss.c ...

  9. SpringBoot日志配置(详解) 涉及控制台输出日志、生成日志文件、日志级别修改、hibernate日志不输出

    写在前面 本篇主要讲述日志配置,看完本篇可以解决下述问题, 控制台输出日志.生成日志文件.日志级别修改.hibernate日志不输出 Git Demo Path:https://github.com/ ...

随机推荐

  1. Rookey.Frame v1.0快速开发平台-用户登录

    上一次介绍的了Rookey.Frame v1.0快速开发平台的整体功能,接下来会对各个功能点进行解析说明,今天给大家介绍下系统登录功能. 用户登录 系统中基本上所有功能页面都是从后台代码拼接后返回的, ...

  2. CentOS7.5下时间戳转换为时间

    Unix时间戳(英文为Unix epoch, Unix time, POSIXme 或 Unix timestamp)是从1970年1月1日(UTC/GMT的午夜)开始所经过的秒数,不考虑闰秒 一.查 ...

  3. LoadRunner截取字符串操作

    LoadRunner截取字符串操作 在使用LoadRunner winsockets协议写脚本,遇到下面问题: 在接收到的查询数据库的结果中我要取红色部份用于下面的select recv buf60 ...

  4. oracle 内连接、外连接、自然连接、交叉连接练习

    oracle 内连接.外连接.自然连接.交叉连接练习 --查询员工信息 select * from emp; --查询部门信息 select * from dept; --需求:查询员工姓名.薪资和所 ...

  5. 基于原生JS的jsonp方法的实现

    基于原生JS的jsonp方法的实现 jsonp,相信大家并不陌生,是在js异步请求中解决跨域的方法之一,原理很简单,有不清楚的同学可以google下,这里就补详细解释了.在Jquery库中,jQuer ...

  6. GNU Wget 1.19.4 for Windows

    资源地址:https://eternallybored.org/misc/wget/ 然后将工具目录加入环境变量

  7. 如何监控GPU使用情况并杀死指定其中进程

    仰望高端玩家的小清新 http://www.cnblogs.com/luruiyuan/ 有时候我们常常会有一个需求是监控GPU指定情况,并且需要根据需要杀死GPU进程 这里介绍几个与之相关的指令: ...

  8. java 简单类

    package 面向对象编程_封装性; //1.类名称必须存在有意义,例如Book.Emp //2.类之中所有的属性必须用private封装,封装后的属性必须提供有setter和getter方法 // ...

  9. React篇章-React 组件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  10. jQuery.Validate.js验证大表单的优化

    最近在项目中有遇到一个Form表单中有200多个标签.在提交表单时网页会出现等待时间很长,甚至会出现网页奔溃的情况. 主要的原因是因为在使用jQuery.Validate.js进行Form验证的时候会 ...