认识 sass
Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library.
特点
- Fully CSS-compatible
- Language extensions such as variables, nesting, and mixins
- Many useful functions for manipulating colors and other values
- Advanced features like control directives for libraries
- Well-formatted, customizable output
SASS 与 SCSS 转化
# Convert Sass to SCSS
$ sass-convert style.sass style.scss
# Convert SCSS to Sass
$ sass-convert style.scss style.sass
sass 安装
gem 安装
gem install sass
源码安装
git clone git://github.com/nex3/sass.git
cd sass
rake install
常见命令
# 编译一次
sass ./test.scss ./test.css
sass ./test.scss:./test.css
# 即时编译，即文件发生变化就重新编译
sass --watch ./test.scss:./test.css
# 编译整个文件夹
sass --watch app/sass:public/stylesheets
# 编译风格
sass --style expanded ./test.scss:./test.css
--style 可以跟以下几种参数：
nested ：嵌套缩进的css代码，默认
expanded ：展开的多行css代码
compact ：简洁格式的css代码
compressed ：压缩后的css代码
语法
声明变量
$width:200px;
默认变量
会被不带 !default 的覆盖
$brand-primary : darken(#428bca, 6.5%) !default; // #337ab7
$btn-primary-color: #fff !default;
$btn-primary-bg : $brand-primary !default;
$btn-primary-border : darken($btn-primary-bg, 5%) !default;
局部变量和全局变量
$color: orange !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)
.block {
color: $color;//调用全局变量
}
em {
$color: red;//定义局部变量
a {
color: $color;//调用局部变量
}
}
span {
color: $color;//调用全局变量
}
编译结果
.block {
color: orange;
}
em a {
color: red;
}
span {
color: orange;
}
Referencing Parent Selectors: &
Sometimes it's useful to use a nested rule's parent selector in other ways than the default. For instance, you might want to have special styles for when that selector is hovered over or for when the body element has a certain class. In these cases, you can explicitly specify where the parent selector should be inserted using the & character. For example:
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; }
嵌套
选择器嵌套
<!-- html 结构 -->
<header>
<nav>
<a href=“##”>Home</a>
<a href=“##”>About</a>
<a href=“##”>Blog</a>
</nav>
<header>
sass &
nav {
a {
color: red;
header & {
color:green;
}
}
}
编译结果
nav a {
color:red;
}
header nav a {
color:green;
}
属性嵌套
后面带一个冒号
.box {
border: {
top: 1px solid red;
bottom: 1px solid green;
}
}
编译结果
.box {
border-top: 1px solid red;
border-bottom: 1px solid green;
}
伪类嵌套
.clearfix{
&:before,
&:after {
content:"";
display: table;
}
&:after {
clear:both;
overflow: hidden;
}
}
编译结果
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
overflow: hidden;
}
混合宏 mixin
声明与调用
@mixin border-radius{
-webkit-border-radius: 5px;
border-radius: 5px;
}
button {
@include border-radius;
}
不带任何值
@mixin border-radius($radius){
-webkit-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(3px);
}
编译结果
.box {
-webkit-border-radius: 3px;
border-radius: 3px;
}
带默认值
️使用时不带参数
@mixin border-radius($radius:3px) {
-webkit-border-radius: $radius;
border-radius: $radius;
}
.btn {
@include border-radius;
}
编译结果
.btn {
-webkit-border-radius: 3px;
border-radius: 3px;
}
️使用时带参数
@mixin border-radius($radius:3px) {
-webkit-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(50%);
}
编译结果
.box {
-webkit-border-radius: 50%;
border-radius: 50%;
}
多个参数
@mixin center($width,$height){
width: $width;
height: $height;
position: absolute;
top: 50%;
left: 50%;
margin-top: -($height) / 2;
margin-left: -($width) / 2;
}
.box-center {
@include center(500px,300px);
}
编译结果
.box-center {
width: 500px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -250px;
}
特别参数 ...
@mixin box-shadow($shadows...){
@if length($shadows) >= 1 {
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
} @else {
$shadows: 0 0 2px rgba(#000,.25);
-webkit-box-shadow: $shadow;
box-shadow: $shadow;
}
}
.box {
@include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
}
编译结果
.box {
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
}
扩展/继承 @extend
//SCSS
.btn {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
background-color: #f36;
color: #fff;
@extend .btn;
}
.btn-second {
background-color: orange;
color: #fff;
@extend .btn;
}
编译结果
//CSS
.btn, .btn-primary, .btn-second {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
background-color: #f36;
color: #fff;
}
.btn-second {
background-clor: orange;
color: #fff;
}
占位符 %placeholder
%placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码
//SCSS
%mt5 {
margin-top: 5px;
}
%pt5{
padding-top: 5px;
}
.btn {
@extend %mt5;
@extend %pt5;
}
.block {
@extend %mt5;
span {
@extend %pt5;
}
}
编译结果
//CSS
.btn, .block {
margin-top: 5px;
}
.btn, .block span {
padding-top: 5px;
}
从编译出来的 CSS 代码可以看出，通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起。
混合宏 vs 继承 vs 占位符
总结
建议：
- 如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。
- 如果你的代码块不需要专任何变量参数，而且有一个基类已在文件中存在，那么建议使用 Sass 的继承。
- 否则优先使用占位符。
@at-root
.parent {
...
@at-root {
.child1 { ... }
.child2 { ... }
}
.step-child { ... }
}
编译结果
.parent { ... }
.child1 { ... }
.child2 { ... }
.parent .step-child { ... }
插值
#{}
变量和属性
$properties: (margin, padding);
@mixin set-value($side, $value) {
@each $prop in $properties {
#{$prop}-#{$side}: $value;
}
}
.login-box {
@include set-value(top, 14px);
}
编译结果
.login-box {
margin-top: 14px;
padding-top: 14px;
}
选择器
@mixin generate-sizes($class, $small, $medium, $big) {
.#{$class}-small { font-size: $small; }
.#{$class}-medium { font-size: $medium; }
.#{$class}-big { font-size: $big; }
}
@include generate-sizes("header-text", 12px, 20px, 40px);
编译结果
.header-text-small { font-size: 12px; }
.header-text-medium { font-size: 20px; }
.header-text-big { font-size: 40px; }
注释
- 类似 CSS 的注释方式，使用 ”/* ”开头，结属使用 ”*/ ”，会在编译出来的 CSS 显示
- 类似 JavaScript 的注释方式，使用“//”，不会在编译出来的 CSS 显示
数据类型
- numbers (e.g. 1.2, 13, 10px)
- strings of text, with and without quotes (e.g. "foo", 'bar', baz)
- colors (e.g. blue, #04a3f9, rgba(255, 0, 0, 0.5))
- booleans (e.g. true, false)
- nulls (e.g. null)
- lists of values, separated by spaces or commas (e.g. 1.5em 1em 0 2em, Helvetica, Arial, sans-serif)
- maps from one value to another (e.g. (key1: value1, key2: value2))
- function references
两种字符串类型：
- 有引号字符串 (quoted strings)，如 "Lucida Grande" 、'http://sass-lang.com'；
- 无引号字符串 (unquoted strings)，如 sans-serifbold。
在编译 CSS 文件时不会改变其类型。只有一种情况例外，使用 #{ }插值语句 (interpolation) 时，有引号字符串将被编译为无引号字符串，这样方便了在混合指令 (mixin) 中引用选择器名。
@mixin firefox-message($selector) {
body.firefox #{$selector}:before {
content: "Hi, Firefox users!";
}
}
@include firefox-message(".header");
编译结果
body.firefox .header:before {
content: "Hi, Firefox users!";
}
逻辑运算
@mixin col-sm($width: 50%){
@if type-of($width) != number {
@error "$width 必须是一个数值类型，你输入的 width 是: #{$width}.";
}
@if not unitless($width){
@if unit($width) != "%" {
@error "$width 应该是一个百分值，你输入的 width 是: #{$width}.";
}
} @else {
@warn "$width 应该是一个百分值，你输入的 width 是: #{$width}.";
$width: percentage($width);
}
@media (min-width:768px){
width:$width;
}
}
.section{
@include col-sm(0.2);
}
