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. c#多线程实现函数同步运行

    我们假设有方法run1()和run2(),耗时都比较大,实现他们同步运行将大大提高程序的效率,在这里考虑使用多线程的方法. 首先添加引用,定义bool型i,j为false. using System. ...

  2. 关于button标签会刷新页面的问题

    当button标签在form表单里面时,这时点击button按钮会提交表单刷新页面. <form action=""> <button>点击</but ...

  3. ActiveMQ 权限(一)

    在 ActiveMQ 认证(一) 中,若用户名或密码不正确,不能连接到ActiveMQ.我们可以通过配置文件,确用户是否有消息的读取.写入和管理的权限. 在plugin配置节点下,配置以下信息: &l ...

  4. open -python操作文件

    一打开文件 二操作文件 三关闭文件 open(文件,模式,编码),打开文件----->0101010(以二进制的方式打开)------>编码(open默认utf-8编码)------> ...

  5. openstack首页默认跳转

    在/var/www/html新建index.html <html> <head> <meta http-equiv="Content-Language" ...

  6. div块元素垂直水平居中方法总结

    1.已知块级元素的宽和高,使用绝对定位+外边距设定水平垂直居中. 父元素position:relative,子元素position:absolute;top:50%;left:50%;margin-t ...

  7. bzoj 1776

    收获: 树上直径一定包含深度最深的点. 然后O(nlogn) 暴力. /************************************************************** P ...

  8. Javascript中的异步

    在C#,Java中,异步方法,通常是伴随多线程,并发等术语一起出现的,比如C#中的async方法,是运行在一个线程池线程上,并且在异步方法运行完成后,有一个回调函数通知主线程. 那么由于Javascr ...

  9. 2015 UESTC 数据结构专题N题 秋实大哥搞算数 表达式求值/栈

    秋实大哥搞算数 Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/show/1074 Des ...

  10. bzoj 1789: [Ahoi2008]Necklace Y型项链 贪心

    1789: [Ahoi2008]Necklace Y型项链 Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://www.lydsy.com/Jud ...