sass的简介,安装,语法。
一,sass的简介
1,Sass完全兼容所有版本的CSS。我们对此严格把控,所以你可以无缝地使用任何可用的CSS库。
2,Sass已经经过其核心团队超过8年的精心打造。
3,有无数的框架使用Sass构建。比如Compass,Bourbon,和Susy。
二,sass的语法
1,使用变量
sass
让人们受益的一个重要特性就是它为css
引入了变量。你可以把反复使用的css
属性值 定义成变量,然后通过变量名来引用它们,而无需重复书写这一属性值。或者,对于仅使用过一 次的属性值,你可以赋予其一个易懂的变量名,让人一眼就知道这个属性值的用途。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的简介,安装,语法。的更多相关文章
- Sass学习之路:Sass、Compass安装与命令行
导言 CSS不是一门真正意义上的编程语言,很多编程语言理所当然的特性(比如变量),都不被支持.同时再开发模块化的web项目的时候,也要避免相互干扰.为了弥补CSS的这些不足,就产生了CSS预处理器,S ...
- sass和compass安装
安装Sass和Compass sass基于Ruby语言开发而成,因此安装sass前需要安装Ruby.(注:mac下自带Ruby无需在安装Ruby!) window下安装SASS首先需要安装Ruby,先 ...
- sass ruby环境 安装配置,使用sublime text3 中sass
首先,你想要使用sass的话,就必须依赖于ruby环境.所以,你要下一个ruby.具体的链接应该是(http://rubyinstaller.org/downloads).下载相应的版本.- 下载好之 ...
- Spark简介安装和简单例子
Spark简介安装和简单例子 Spark简介 Spark是一种快速.通用.可扩展的大数据分析引擎,目前,Spark生态系统已经发展成为一个包含多个子项目的集合,其中包含SparkSQL.Spark S ...
- Python 3 mysql 简介安装
Python 3 mysql 简介安装 一.数据库是什么 1. 什么是数据库(DataBase,简称DB) 数据库(database,DB)是指长期存储在计算机内的,有组织,可共享的数据的集合.数据 ...
- Linux简介安装、系统启动过程、目录结构
Linux简介安装.系统启动过程.目录结构 Linux 教程 Linux 英文解释为 Linux is not Unix. Linux 简介 Linux内核最初只是由芬兰人李纳斯·托瓦兹(Linus ...
- Sass入门——简介+语法格式及编译调试
本文来自慕课网大漠. Sass简介 Sass和SCSS区别 1.后缀名不同,很好理解 2.Sass以严格的缩进语法规则书写,不带大括号和分号:而SCSS的语法规则和CSS的语法很类似. Sass: $ ...
- Sass和compass 安装 和配合grunt实时显示 [Sass和compass学习笔记]
demo 下载http://vdisk.weibo.com/s/DOlfkrAWjkF/1401192855 为什么要学习Sass和compass ?提高站独立和代码产品化的绝密武器,尤其是程序化cs ...
- cobbler简介+安装
(介绍部分的内容部分是借鉴网上的非原创) 回顾pxe+kickstart PXE PXE(preboot execute environment,预启动执行环境) PXE启动原理: 当计 ...
随机推荐
- C#枚举数值与名称的转换实例分享
首先建立一个枚举: 复制代码代码如下: /// <summary> /// 颜色 /// </summary> public enum ColorType ...
- analyzing problems
If you talking to a friend or talking to a family member ,you can say:what's the metter or What's go ...
- 17.C++-string字符串类(详解)
C++字符串string类 在C语言里,字符串是用字符数组来表示的,而对于应用层而言,会经常用到字符串,而继续使用字符数组,就使得效率非常低. 所以在C++标准库里,通过类string从新自定义了字符 ...
- Maven-02: 依赖
其实一个依赖声明可以包含如下的一些元素: groupId,artifactId,version:依赖的基本坐标. type:依赖的类型,对应于项目坐标定义的packaging.大多数情况下,该元素不必 ...
- RabbitMQ的安装和配置
在Windows下进行rabbitMQ的安装 第一步:软件安装 如果安装rabbitMQ首先安装基于erlang语言支持的OTP软件,然后在下载rabbitMQ软件进行安装(安装过程都是下一步,在此不 ...
- 设计模式 --> (5)适配器模式
适配器模式 适配器模式把一个类的接口变换成客户端所期待的另一种接口,从而使原本接口不匹配而无法在一起工作的两个类能够在一起工作.比如说我的hp笔记本,美国产品,人家美国的电压是110V的,而我们中国的 ...
- JVM学习六:JVM之类加载器之双亲委派机制
前面我们知道类加载有系统自带的3种加载器,也有自定义的加载器,那么这些加载器之间的关系是什么,已经在加载类的时候,谁去加载呢?这节,我们将进行讲解. 一.双亲委派机制 JVM的ClassLoader采 ...
- pyrhon多进程操作初探
linux系统中提供了fork函数进行进程的创建,这个接口在函数返回上比较特殊,有两个返回值,一个是子进程返回值为0,一个是父进程返回值,值大于0,表是子进程的ID.如果小于0.则表示接口出错. py ...
- Oracle查询优化改写--------------------给查询结果排序
一.查看员工所雇员工信息(查询部门号==10并且按照入职时间升序排序.第二种用数字来代替) 二.按多个字段排序(dmpno,deptno,sal,ename,job) 三.按照子串排序(有一种速查方法 ...
- 微信小程序中实现微信支付
最近在做微信小程序,今天刚好做到小程序里的微信支付这块,踩过不少坑,特此写个博客记录下,希望能帮到其它人吧. 我总结了一下,小程序中的微信支付和之前其它的公众号里的微信支付有两个区别,第一就是小程序必 ...