SASS语法
SASS语法也称之为SASS的缩进语法,其目的是担供一个更简洁的语法。对于一些人来说,更多的是基于于CSS的美学吸引力,用SASS来代替SCSS语法。
SASS语法和CSS语法不一样,他不是使用大括号{}和分号;来分隔块的样式,它使用的是类似于HAML语法,使用缩进和换行来分块,而不是使用分号来分隔语句。这通常会省去大量的篇幅,也缩小了文件大小。
每个在SASS中语句,属性声明和选择器必须放在自己的线上。换句话说,选择器和样式的声明不用大括号{}区分,但必须分行书写。
选择器
    属性:属性值
同样的,我们有一段CSS代码:
.container {
    width: 960px;
    margin: 0 auto;
}
 
其对应的SASS代码如下:
 .container
    width: 960px
    margin: 0 auto
 
在SASS语法中,有多个选择器时,每个选择器必须在一个行,而且用逗号,分隔。简单点说,一个选择器占一行,而且相邻两个选择器之间使用,分开:
.user #userTab,
.posts #postTab
    width: 100px
    height:30px
 
我们简单来看一个SCSS、SASS和CSS三者之间语法的对比示例:
SCSS
$blue:#3bbfce;              
$margin:16px;           
.container{         
    border-color:$blue;    
    color:darken($blue,9%); 
}                           
.border {                   
    padding: $margin / 2;   
    margin: $margin / 2;   
    border-color: $blue;  
}
 
SASS
$blue:#3bbfce             
$margin: 16px            
.container
    border-color:$blue
    color:darken($blue,9%)
 
.border
    padding: $margin / 2
    margin: $margin / 2 
    border-color: $blue  
 
编译出来的CSS
.container {
    border-color: #3bbfce;
    color: #2b9eab;
}
.border {
    padding: 8px;
    margin: 8px;
    border-color: #3bbfce;
}
 
就我个人而言,我推荐使用SCSS,因为它似乎更具可读性。从外表看,SCSS和CSS几乎是一样的。
 

**

【02】SASS与SCSS的更多相关文章

  1. sass或scss入门

    1.sass环境搭载: 安装ruby 安装sass 安装compass 配置webstorm 如果只是使用sass的话,就配置sass命名监听就好了 如图: sass目录如下: 如果配置了compas ...

  2. 【已解决】React中配置Sass引入.scss文件无效

    React中配置Sass引入.scss文件无效 在react中使用sass时,引入.scss文件失效 尝试很多方法没法解决,最终找到解决方法,希望能帮助正在坑里挣扎的筒子~ 在node_modules ...

  3. sass和scss的区别

    页面引入的时候还是引入的css文件 因为sass和scss都是一种css的预处理工具 目的最后都是生成css文件 sass不带{}和:是基于Ruby 写出来的,严格的缩进方式来控制 scss带这两个 ...

  4. sass和scss相关知识

    参考地址:http://www.imooc.com/learn/311 什么是css预处理器? CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性 ...

  5. webstorm和intellij idea下如何自动编译sass和scss文件

    webstorm和intellij idea下如何自动编译sass和scss文件 https://segmentfault.com/a/1190000008996504 https://www.jia ...

  6. Sass 和 SCSS 有什么区别?

    Sass 官网上是这样描述 Sass 的: Sass 是一门高于 CSS 的元语言,它能用来清晰地.结构化地描述文件样式,有着比普通 CSS 更加强大的功能. Sass 能够提供更简洁.更优雅的语法, ...

  7. SASS和SCSS标签详解与scoped局部和全局的使用

    首先,学会使用sass: 1.先下载和安装node-sass和一些加载器 $ cnpm install sass-loader node-sass vue-style-loader --D 2.配置w ...

  8. sass(scss)10大常用重要特性

    用sass用了好久,期初看中的是他的嵌套功能,因为刚开始的时候是用jquery,电脑安装Ruby,全局安装sass,将scss编译为css,不得不说真的很方面,节点套节点,和html的很类似.但是后来 ...

  9. React中配置Sass引入.scss文件无效

    React中配置Sass引入.scss文件无效 在react中使用sass时,引入.scss文件失效尝试很多方法没法解决,最终找到解决方法,希望能帮助正在坑里挣扎的筒子~ 在node_modules文 ...

  10. Sass和Scss

    Sass:https://www.sass.hk/ Sass是什么 Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables).嵌套 (nested rul ...

随机推荐

  1. 洛谷 P3455 [POI2007]ZAP-Queries || 洛谷P2522,bzoj2301

    https://www.luogu.org/problemnew/show/P3455 就是https://www.cnblogs.com/hehe54321/p/9315244.html里面的方法2 ...

  2. Travelling HDU - 3001

    Travelling HDU - 3001 方法:3进制状态压缩dp(更好的方法是预处理出每个状态数字对应的y数组,然后用刷表,时间复杂度可以少一个n) #include<cstdio> ...

  3. Hibernate Could not obtain transaction-synchronized Session for current thread问题处理

    项目通过Hibernate查询时报出如下错误: Hibernate Could not obtain transaction-synchronized Session for current thre ...

  4. 转 多个版本的数据库在同一服务器上ORA-12557

    http://blog.chinaunix.net/uid-42518-id-3153473.html 问题描述:当同一台机子上安装了多个版本的数据库,可能在连接库或ASM时会报以下错误.ORA-12 ...

  5. python_面向对象(6)

    第1章 递归函数 1.1 概述 1.2 练习 1.3 二分查找 第2章 面向对象•类 2.1 类的介绍 2.2 书写格式 2.3 类的属性 2.4 self介绍 2.5 类属性补充 2.6 调用查看静 ...

  6. NFS与AutoNFS实例

    NFS概述: NFS,是Network File System的简写,即网络文件系统.网络文件系统是FreeBSD支持的文件系统中的一种,也被称为NFS. NFS允许一个系统在网络上与他人共享目录和文 ...

  7. Jquery 中使用String.Format

    第一种方法: String.format = function() { if (arguments.length == 0) return null; var str = arguments[0]; ...

  8. CAS分析

    CAS:Compare and Swap, 翻译成比较并交换.   CAS 指的是现代 CPU 广泛支持的一种对内存中的共享数据进行操作的一种特殊指令.这个指令会对内存中的共享数据做原子的读写操作.简 ...

  9. return false 的其中一种用法

    return false 的具体是做什么的在这里就不多说了,因为我觉得我形容不明白.....避免大家弄混乱,就不给大家添麻烦了~~ 直接上例子: 1.先看看下面一段代码,指出其中的错误所在: //点击 ...

  10. C#处理Android Audio and Video

    Video Converter for .NET (C#) FFMpeg wrapper http://www.nrecosite.com/video_converter_net.aspx Docum ...