Sass 增强语法的样式表
- 完全兼容CSS3
- 相对CSS,扩展了变量、嵌套和mixins
- 对控制颜色和其他值的非常有用的方法
- 高级功能,如库的直接控制
- 良好的格式,自定义输出
对于Sass,有两种语法。一种叫SCSS(Sassy CSS),它是CSS语法的扩展,也就是说,每个有效的CSS3样式对于一个有效的SCSS。并且SCSS理解更多的CSS技巧和厂商特性,里如果IE8的filter语法。第二种是旧些的语法,叫SASS。提供一种写CSS的便捷方式。前者的文件后缀名是.scss,后者是.sass。使用Convert命令可以相互转换:sass-convert style.sass style.scss反之亦然
使用方法
$gem install sass
2. 转换
sass input.scss output.css
3. 监控
$sass --watch input.scss:output.css
目录:
$sass --watch app/sass:public/stylesheets
CSS扩展
1. 嵌套规则
Sass允许CSS嵌套到另外一个CSS中。例如:
#main p {
color: #00ff00;
width: 97%; .redbox {
background-color: #ff0000;
color: #000000;
}
}
编译后:
#main p {
color: #00ff00;
width: 97%;
}
#main p .redbox {
background-color: #ff0000;
color: #000000;
}
2.引用父选择器:&
在嵌套使用中,有时候需要引用父元素:
a {
font-weight: bold;
text-decoration: none;
&:hover { text-decoration: underline; }
body.firefox & { font-weight: normal; }
}
编译后:
a {
font-weight: bold;
text-decoration: none; }
a:hover {
text-decoration: underline;
}
body.firefox a {
font-weight: normal;
}
3.嵌套属性
在同一个命名空间下,CSS有时候会有多个属性,例如font-family,font-size和font-weight都在font命令空间下。使用嵌套,将减少输入。Sass提供冒号(:)来支持这个方法。例如:
.funky {
font: {
family: fantasy;
size: 30e m;
weight: bold;
}
}
编译后:
.funky {
font-family: fantasy;
font-size: 30em;
font-weight: bold;
}
也是可以带值的
.funky {
font: 20px/24px fantasy {
weight: bold;
}
}
编译后:
.funky {
font: 20px/24px fantasy;
font-weight: bold;
}
注释
方法:/* */或者//
@规则
1. @import
导入SCSS和Sass文件。所有导入的文件都会被合并成一个单独的CSS文件。另外,变量和mixins都可以在主文件中引用。
在一次import中,可以导入多个文件,之间使用逗号隔开。例如:
@import "rounded-corners", "text-shadow"
可以引入变量:
$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");
编译后:
@import url("http://fonts.googleapis.com/css?family=Droid+Sans");
Sass 增强语法的样式表的更多相关文章
- sass笔记-3|Sass基础语法之样式复用和保持简洁
上一篇详述了Sass如何嵌套.导入和注释这3个基本方式来保持条理性和可读性,这一篇更进一步地阐述sass保持样式复用和简洁的方式--混合器和选择器继承--这两种方式都能复用样式,使用它们也不难,但一定 ...
- WEB入门三 CSS样式表基础
学习内容 Ø CSS的基本语法 Ø CSS选择器 Ø 常见的CSS样式 Ø 网页中3种使用CSS的方式 能力目标 Ø 理解CSS的 ...
- 【Qt开发】QT样式表单 qss的样式优化
QT样式表单 QT的样式表单允许我们在对程序不做任何代码上的更改的情况下轻松改变应用程序的外观. 其思想来源于网页设计中的CSS,即可以将功能设计和美学设计分开. 它的语法和概念和HTML CSS也是 ...
- 0811 css样式表基本
CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. /*注释*/ 注释语法 1. 样式表分类 ①内联样式表 和html联合显示,控制精确,但是可重用性差 ...
- QT样式表
QT样式表 一.QT样式表简介 1.QT样式表简介 QSS的主要功能是使界面的表现与界面的元素分离,使得设计皮肤与界面控件分离的软件成为可能. QT样式表是允许用户定制widgets组件外观的强大机制 ...
- 1+X证书学习日志 —— css样式表
## 因为初级的内容较多,所以选了一些有用的 需要记忆的内容写下 方便日后回顾 CSS语法 选择符{属性:属性值;} ## 所有的css代码 都要放在css样式表里面 ...
- vue2.0 样式表引入的方法 css sass less
在引入样式之前,首先要了解static.assets两个文件夹的区别. 从字面上可以看出,static用来存放静态文件,assets用来存放资源文件: static存放的文件不会被编译,打包后直接赋值 ...
- Qt 之 QSS(样式表语法)
https://blog.csdn.net/liang19890820/article/details/51691212 简述 Qt样式表(以下统称QSS)的术语和语法规则几乎和CSS相同.如果你熟悉 ...
- Qt之QSS(样式表语法)
http://blog.csdn.net/liang19890820/article/details/51691212 版权声明:进步始于交流,收获源于分享!纯正开源之美,有趣.好玩.靠谱...作者: ...
随机推荐
- spark-MLlib之线性回归
>>提君博客原创 http://www.cnblogs.com/tijun/ << 假定线性拟合方程: 提君博客原创 变量 Xi 是 i 个变量或者说属性 参数 ai 是 ...
- NOIP2015普及组复赛A 推销员
题目链接:https://ac.nowcoder.com/acm/contest/243/A 题目大意: 略 分析: 方法就是把疲劳值从小到大排个序,然后从尾部开始一个一个取,当选到第i(i > ...
- Linux(Ubuntu 16) 下Java开发环境的配置(二)------Tomcat的配置及常见问题
前言 相比于java JDK的配置,Tomcat的配置简单的多,简直就相当于直接运行了,本文以Tomcat8.0为例进行配置 1.Tomcat的下载 地址:https://tomcat.apach ...
- J2SE学习笔记
如何学习Java 一.面向对象设计思想 1.面向对象:开车去新疆,车怎么去的我不管,我只调用车的go() 方法即可. 2.类和对象:类可以看成一类对象的模板,对象可以看成该类的一个具体实例. 3.类和 ...
- ASUS RT-AC68U 刷梅林固件及安装***插件记录(详细)
本文借鉴网络并亲自刷机过程记录(网上很多教程都不太详细) 版本:华硕ASUS RT- AC68U Wireless-AC1900 路由器的连接方式略,有说明书 连好后打开浏览器输入:http:/ ...
- python的基本流程控制
一:if判断语句 1.1 if判断语法之一 if条件: 子代码块 1.2 if判断语法之二 if条件: 子代码块 else: 子代码块 1.3 if判断语法之三 if条件: if条件: 子代码块 1. ...
- 不用Ajax时的传参方法
不用Ajax时的怎么传参 创建一个form表单 function test(){ var params = { "参数名": "参数值" }; postExce ...
- [Codeforces702F]T-Shirts——非旋转treap+贪心
题目链接: Codeforces702F 题目大意:有$n$种T恤,每种有一个价格$c_{i}$和品质$q_{i}$且每种数量无限.现在有$m$个人,第$i$个人有$v_{i}$元,每人每次会买他能买 ...
- 自用windows小软件
好用的软件的定义:没有广告,提升效率,最低的内存占用,体积小 1.解压工具 bandizip:自动解压功能,棒呆了 网址:https://www.bandisoft.com/ 2.pdf阅读编辑工具 ...
- Math & Number Theory
数学 数论: 莫比乌斯反演 矩阵游戏 小学数学,欧拉定理 组合: 线性代数: 高斯消元 其他: 一些题目