一,sass的简介

1,Sass完全兼容所有版本的CSS。我们对此严格把控,所以你可以无缝地使用任何可用的CSS库。

2,Sass已经经过其核心团队超过8年的精心打造。

3,有无数的框架使用Sass构建。比如CompassBourbon,和Susy

二,sass的语法

1,使用变量

  1. sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值 定义成变量,然后通过变量名来引用它们,而无需重复书写这一属性值。或者,对于仅使用过一 次的属性值,你可以赋予其一个易懂的变量名,让人一眼就知道这个属性值的用途。
  2. sass使用$符号来标识变量(老版本的sass使用!来标识变量。改成$是多半因为!highlight-color看起来太丑了。),比如$highlight-color$sidebar-width。为什么选择$ 符号呢?因为它好认、更具美感,且在CSS中并无他用,不会导致与现存或未来的css语法冲突。

2,变量声明

sass变量的声明和css属性的声明很像:

$nav-color: #F90;
nav {
$width: 100px;
width: $width;
color: $nav-color;
} //编译后 nav {
width: 100px;
color: #F90;
}
3,变量引用
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
border: $highlight-border;
} //编译后 .selected {
border: 1px solid #F90;
}

4,嵌套CSS 规则
#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
aside { background-color: #EEE }
}
 /* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

5,父选择器的标识符&

article a {
color: blue;
&:hover { color: red }
}
 /* 编译后 */
article a { color: blue }
article a:hover { color: red }
sass官方地址:https://www.sass.hk/

sass的简介,安装,语法。的更多相关文章

  1. Sass学习之路:Sass、Compass安装与命令行

    导言 CSS不是一门真正意义上的编程语言,很多编程语言理所当然的特性(比如变量),都不被支持.同时再开发模块化的web项目的时候,也要避免相互干扰.为了弥补CSS的这些不足,就产生了CSS预处理器,S ...

  2. sass和compass安装

    安装Sass和Compass sass基于Ruby语言开发而成,因此安装sass前需要安装Ruby.(注:mac下自带Ruby无需在安装Ruby!) window下安装SASS首先需要安装Ruby,先 ...

  3. sass ruby环境 安装配置,使用sublime text3 中sass

    首先,你想要使用sass的话,就必须依赖于ruby环境.所以,你要下一个ruby.具体的链接应该是(http://rubyinstaller.org/downloads).下载相应的版本.- 下载好之 ...

  4. Spark简介安装和简单例子

    Spark简介安装和简单例子 Spark简介 Spark是一种快速.通用.可扩展的大数据分析引擎,目前,Spark生态系统已经发展成为一个包含多个子项目的集合,其中包含SparkSQL.Spark S ...

  5. Python 3 mysql 简介安装

    Python 3 mysql 简介安装 一.数据库是什么 1.  什么是数据库(DataBase,简称DB) 数据库(database,DB)是指长期存储在计算机内的,有组织,可共享的数据的集合.数据 ...

  6. Linux简介安装、系统启动过程、目录结构

    Linux简介安装.系统启动过程.目录结构 Linux 教程 Linux 英文解释为 Linux is not Unix. Linux 简介 Linux内核最初只是由芬兰人李纳斯·托瓦兹(Linus ...

  7. Sass入门——简介+语法格式及编译调试

    本文来自慕课网大漠. Sass简介 Sass和SCSS区别 1.后缀名不同,很好理解 2.Sass以严格的缩进语法规则书写,不带大括号和分号:而SCSS的语法规则和CSS的语法很类似. Sass: $ ...

  8. Sass和compass 安装 和配合grunt实时显示 [Sass和compass学习笔记]

    demo 下载http://vdisk.weibo.com/s/DOlfkrAWjkF/1401192855 为什么要学习Sass和compass ?提高站独立和代码产品化的绝密武器,尤其是程序化cs ...

  9. cobbler简介+安装

    (介绍部分的内容部分是借鉴网上的非原创) 回顾pxe+kickstart PXE        PXE(preboot execute environment,预启动执行环境) PXE启动原理: 当计 ...

随机推荐

  1. 用Node.js写爬虫,撸羞羞的图片

    说到爬虫,很多人都认为是很高大上的东西.哇塞,是不是可以爬妹纸图啊,是不是可以爬小片片啊.答案就是对的.爬虫可以完成这些东西的操作.但是,作为一个正直的程序员,我们要在法律允许范围内用爬虫来为我们服务 ...

  2. 如何彻底关闭windows update

    对于我个人来说,我并不喜欢更新windows,打补丁对于我来说是一件没必要的事情,所以每次我装完系统之后的第一件事情就是在联网之前关闭windows更新,我通常是进去服务里面关闭,方法是win+R,然 ...

  3. OSI七层模型对应的协议

    osi七层模型对应的协议 author:headsen chen    2017-10-21  11:44:47 个人原创,转载请注明作者,出处.否则依法追究法律责任 1,物理层:带信号的,同轴电缆, ...

  4. 制作centos的启动盘

    制作centos的U盘启动盘 author:headsen chen    2017-10-13   10:24:50  个人原创,允许转载,请注明作者,出处,否则依法追究法律责任! 1,下载Ultr ...

  5. 方法的重写与重载的区别(Override与Overload)。重载的方法是否可以改变返回值的类型

    方法的重写(Override)与重载(Overload)的区别.重载的方法是否可以改变返回值的类型?[基础] 解释: 方法的重写overriding和重载Overloading是Java多态性的不同表 ...

  6. ASP.NET MVC编程——模型

    1 ViewModel 是一种专门提供给View使用的模型,使用ViewModel的理由是实体或领域模型所包含的属性比View使用的多或少,这种情况下实体或领域模型不适合View使用. 2模型绑定 默 ...

  7. Python实现制度转换(货币,温度,长度)

    人民币和美元是世界上通用的两种货币之一,写一个程序进行货币间币值转换,其中: 人民币和美元间汇率固定为:1美元 = 6.78人民币. 程序可以接受人民币或美元输入,转换为美元或人民币输出.人民币采用R ...

  8. 大数运算的算法设计和C++实现

    1.背景 工作中遇到过需要进行极大数据的存储和运算的场景,当时使用Python解决了这个问题,在Python中,整数没有位数限制,使用起来很方便.但是当程序主体使用C/C++实现时,就比较麻烦.所以考 ...

  9. 设计模式 --> (6)原型模式

    原型(Prototype)模式 用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象. 原型模式是一种创建型设计模式,Prototype模式允许一个对象再创建另外一个可定制的对象,根本无需知 ...

  10. JavaScript 哈希表(散列表)应用

    查找的效率与比较次数密切相关.基于比较的程序,运算效率是比较低的.比如平时可以通过indexOf查找一个数据.但这是一个基于比较的一个实现.如果是淘宝那样有上亿个商品,那么用indeOf 来查数据就会 ...