以下代码是基于scss格式的:
.sass与.scss的区别
“.sass”只能使用 Sass 老语法规则(缩进规则),“.scss”使用的是 Sass 的新语法规则,也就是 SCSS 语法规则(类似 CSS 语法格式)。
.sass:
$font-stack: Helvetica, sans-serif //定义变量
$primary-color: #333 //定义变量
body
font: 100% $font-stack
color: $primary-color
- 1
- 2
- 3
- 4
- 5
- 6
.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
sass与scss格式的转换
# Convert Sass to SCSS
$ sass-convert style.sass style.scss
# Convert SCSS to Sass
$ sass-convert style.scss style.sass
- 1
- 2
- 3
- 4
- 5
命令行编译
#单文件
sass --watch input.scss:output.css
#多文件
sass --watch app/sass:public/stylesheets
- 1
- 2
- 3
- 4
GUI 界面工具编译
Koala
Compass.app
Scout
CodeKit
Prepros
编译错误
1.要用UTF-8
2.文件路径及文件名不要用中文
输出方式
4.在 Sass 中编译出来的样式风格也可以按不同的样式风格显示。其主要包括以下几种样式风格:
嵌套输出方式 nested
展开输出方式 expanded
紧凑输出方式 compact
压缩输出方式 compressed
$ sass --watch test.scss:test.css --style nested
- 1
变量
声明变量:sass离不开$
$width : 300px;
- 1
普通变量 & 默认变量
$fontSize: 12px;
body{
font-size:$fontSize;
}
$baseLineHeight:1.5 !default;
body{
line-height: $baseLineHeight;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
局部变量 & 全局变量
//SCSS
$color: orange !default;//定义全局变量
.block {
color: $color;//调用全局变量
}
em {
$<span class="hljs-attribute">color</span><span class="hljs-value">: red;</span><span class="hljs-comment">//定义局部变量(全局变量 $color 的影子)
a {
color: $color;//调用局部变量
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
嵌套
选择器嵌套
nav {
a {
color: red;
header & { //其中&代表其所在位置的所有长辈元素
color:green;
}
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
nav a {
color:red;
}
header nav a {
color:green;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
属性嵌套
主要用于padding ,margin,font等属性
.box {
border: { top: 1px solid red;
bottom: 1px solid green;
}
}
- 1
- 2
- 3
- 4
- 5
- 6
.box {
border-top: 1px solid red;
border-bottom: 1px solid green;
}
- 1
- 2
- 3
- 4
伪类嵌套
.clearfix{
&:before,
&:after {
content:"";
display: table;
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
clearfix:before, .clearfix:after {
content: "";
display: table;
}
- 1
- 2
- 3
- 4
混合宏
声明混合宏@mixin
1.不带参数的混合宏
@mixin border-radius{
-webkit-border-radius: 5px;
border-radius: 5px;
}
- 1
- 2
- 3
- 4
2.带参数的混合宏
//一个参数时,可以指定默认值
@mixin border-radius($radius:5px){//此时的5px为默认参数,传入其他值时覆盖该值
-webkit-border-radius: $radius;
border-radius: $radius;
}
//传2个参数
@mixin center($width</span>, <span class="hljs-variable">$height){
...
}
//参数过多 ,一个特别的参数 (...)
@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;
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
3.复杂的混合宏
@maxin box-shadow($shadow..){
@if length($shadow) >= 1{
@include prefixer(box-shadow, $shadow);
} @else {
$shadow:0 0 4px rgba(0,0,0,.3);
@include prefixer(box-shadow, $shadow);
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
调用混合宏@include
button{
@include border-radius;
}
- 1
- 2
- 3
不足之处
会产生冗余的代码块,如:
@mixin border-radius{
-webkit-border-radius: 3px;
border-radius: 3px;
}
.box {
@include border-radius;
margin-bottom: 5px;
}
.btn {
@include border-radius;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
编译生成的CSS为
.box {
-webkit-border-radius: 3px;
border-radius: 3px;
margin-bottom: 5px;
}
.btn {
-webkit-border-radius: 3px;
border-radius: 3px;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
而理想的CSS为
.box, .btn{
-webkit-border-radius: 3px;
border-radius: 3px;
}
.box{
margin-bottom: 5px;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
占位符%placeholder
通过%placeholder声明的代码,如果不被@extend调用的话,不会产生任何代码
%mt5 {
margin-top: 5px;
}
%pt5{
padding-top: 5px;
}
.btn {
@extend %mt5;
@extend %pt5;
}
.block {
@extend %mt5;
span {
@extend %pt5;
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
编译出来的CSS
.btn, .block {
margin-top: 5px;
}
.btn, .block span {
padding-top: 5px;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
拓展/继承@extend
通过关键词 @extend来继承已经存在的样式块
.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;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
生成的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;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
小结:
插值#{}
$properties: (margin, padding);
@mixin set-value($side</span>, <span class="hljs-variable">$value) {
@each $prop</span> <span class="hljs-keyword">in</span> <span class="hljs-variable">$properties {
#{$prop</span>}-#{<span class="hljs-variable">$side</span>}: <span class="hljs-variable">$value;
}
}
.login-box {
@include set-value(top, 14px);
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
编译出的CSS
.login-box {
margin-top: 14px;
padding-top: 14px;
}
- 1
- 2
- 3
- 4
不对的例子
$margin-big: 40px;
$margin-medium: 20px;
$margin-small: 12px;
@mixin set-value($size) {
margin-top: $margin-#{$size};
}
.login-box {
@include set-value(big);
}
@mixin updated-status {
margin-top: 20px;
background: #F00;
}
$flag: "status";
.navigation {
@include updated-#{$flag};
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
注释
数据类型
数字
1,10px
- 1
字符串
有引号字符串 (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");
- 1
- 2
- 3
- 4
- 5
- 6
编译出来的CSS为
body.firefox .header:before {
content: "Hi, Firefox users!";
}
- 1
- 2
- 3
另外 当 deprecated = property syntax 时 (暂时不理解是怎样的情况),所有的字符串都将被编译为无引号字符串,不论是否使用了引号。
颜色
blue、 #04a3f9、 rgba(255,0,0,0.5);
- 1
布尔
true,false
- 1
空值
null;
- 1
值列表
//用空格或者逗号分开,如,1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif
- 1
更多用法:
nth函数(nth function) 可以直接访问值列表中的某一项;
join函数(join function) 可以将多个值列表连结在一起;
append函数(append function) 可以在值列表中添加值;
@each规则(@each rule) 则能够给值列表中的每个项目添加样式。
- 1
- 2
- 3
- 4
运算
加、减、乘、除
加减注意单位一致,
乘除注意单位不能同时存在,
运算符和变量,数值中间用空格分开
- 1
- 2
- 3
变量计算
数字运算
颜色计算:每两位进行运算
字符运算
用 + 串联
如果有引号的字符串被添加了一个没有引号的字符串 (也就是,带引号的字符串在 + 符号左侧), 结果会是一个有引号的字符串。 同样的,如果一个没有引号的字符串被添加了一个有引号的字符串 (没有引号的字符串在 + 符号左侧), 结果将是一个没有引号的字符串。以等号左边的为准
p:before {
content: "Foo " + Bar;
font-family: sans- + "serif";
}
- 1
- 2
- 3
- 4
编译结果
p:before {
content: "Foo Bar";
font-family: sans-serif;
}
- 1
- 2
- 3
- 4
进阶
控制命令
@if @else @else if
@mixin blockOrHidden($boolean:true) {
@if $boolean {
@debug "$boolean is #{$boolean}";
display: block;
}
@else {
@debug "$boolean is #{$boolean}";
display: none;
}
}
.block {
@include blockOrHidden;
}
.hidden{
@include blockOrHidden(false);
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
编译出来的CSS
.block {
display: block;
}
.hidden {
display: none;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
@for
//2种方式
@for $i from <start> through <end> //包括 end 这个值
@for $i from <start> to <end> //不包括 end 这个数
//$i 表示变量
//start 表示起始值
//end 表示结束值
- 1
- 2
- 3
- 4
- 5
- 6
- 7
看个例子
$grid-prefix: span !default;
$grid-width: 60px !default;
$grid-gutter: 20px !default;
%grid {
float: left;
margin-left: $grid-gutter / 2;
margin-right: $grid-gutter / 2;
}
@for $i from 1 through 12 {
.#{$grid</span>-prefix}#{<span class="hljs-variable">$i}{
width: $grid</span>-width * <span class="hljs-variable">$i + $grid</span>-gutter * (<span class="hljs-variable">$i - 1);
@extend %grid;
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
编译出来的CSS
.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
float: left;
margin-left: 10px;
margin-right: 10px;
}
.span1 {
width: 60px;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
@while
$types: 4;
$type-width: 20px;
@while $types > 0 {
.while-#{$types} {
width: $type</span>-width + <span class="hljs-variable">$types;
}
$types</span><span class="hljs-symbol">:</span> <span class="hljs-variable">$types - 1;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
编译出来的CSS
.while-4 {
width: 24px;
}
.while-3 {
width: 23px;
}
.while-2 {
width: 22px;
}
.while-1 {
width: 21px;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
@each
@each $var in <list>
//$var 就是一个变量名,
//<list> 是一个 SassScript 表达式,他将返回一个列表值。
- 1
- 2
- 3
- 4
举个例子
$list</span><span class="hljs-symbol">:</span> adam john wynn mason kuroir;<span class="hljs-regexp">//</span><span class="hljs-variable">$list 就是一个列表
@mixin author-images {
@each $author</span> <span class="hljs-keyword">in</span> <span class="hljs-variable">$list {
.photo-#{$author} {
background: url("/images/avatars/#{$author}.png") no-repeat;
}
}
}
.author-bio {
@include author-images;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
编译出来的CSS
.author-bio .photo-adam {
background: url("/images/avatars/adam.png") no-repeat; }
.author-bio .photo-john {
background: url("/images/avatars/john.png") no-repeat; }
.author-bio .photo-wynn {
background: url("/images/avatars/wynn.png") no-repeat; }
.author-bio .photo-mason {
background: url("/images/avatars/mason.png") no-repeat; }
.author-bio .photo-kuroir {
background: url("/images/avatars/kuroir.png") no-repeat; }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
字符串函数
unquote($string):删除字符串中的引号
unquote() 函数主要是用来删除一个字符串中的引号,如果这个字符串没有带有引号,将返回原始的字符串。
只能删除字符串最前和最后的引号(双引号或单引号),而无法删除字符串中间的引号
quote($string):给字符串添加引号
使用 quote() 函数只能给字符串增加双引号,而且字符串中间有单引号或者空格时,需要用单引号或双引号括起,否则编译的时候将会报错。
同时 quote() 碰到特殊符号,比如: !、?、> 等,除中折号 - 和 下划线_ 都需要使用双引号括起,否则编译器在进行编译的时候同样会报错
To-upper-case()
To-lower-case()
数字函数
列表函数
Introspection函数
Miscellaneous函数
在这里把 Miscellaneous 函数称为三元条件函数,主要因为他和 JavaScript 中的三元判断非常的相似。他有两个值,当条件成立返回一种值,当条件不成立时返回另一种值:
if($condition</span>,<span class="hljs-variable">$if-true,$if-false)
>> if(true,1px,2px)
1px
>> if(false,1px,2px)
2px
- 1
- 2
- 3
- 4
- 5
Map函数
颜色函数
RGB颜色函数
HSL函数
Opacity函数
@规则/指令(directive)
@import
默认情况是sass的@import,以下情况会用CSS的@import
如果文件的扩展名是 .css。
如果文件名以 http:// 开头。
如果文件名是 url()。
如果 @import 包含了任何媒体查询(media queries)
- 1
- 2
- 3
- 4
@import "foo.scss";
@import "foo"
//都会引入foo.scss文件
@import "rounded-corners", "text-shadow";
//引入多个文件
//如果你有一个 SCSS 或 Sass 文件需要引入, 但是你又不希望它被编译为一个 CSS 文件, 这时,你就可以在文件名前面加一个下划线,就能避免被编译。你就可以像往常一样引入这个文件了,而且还可以省略掉文件名前面的下划线
- 1
- 2
- 3
- 4
- 5
- 6
嵌套 @import
虽然大部分时间只需在顶层文件使用 @import 就行了, 但是,你还可以把他们包含在 CSS 规则 和 @media 规则中。
@media
Sass 中的 @media 指令和 CSS 的使用规则一样的简单,但它有另外一个功能,可以嵌套在 CSS 规则中。有点类似 JS 的冒泡功能一样,如果在样式中使用 @media 指令,它将冒泡到外面。
.sidebar {
width: 300px;
@media screen and (orientation: landscape) {
width: 500px;
}
}
- 1
- 2
- 3
- 4
- 5
- 6
编译出来的CSS
.sidebar {
width: 300px;
}
@media screen and (orientation: landscape) {
.sidebar {
width: 500px;
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
支持嵌套
@extend
@at-root
@at-root 从字面上解释就是跳出根元素。当你选择器嵌套多层之后,想让某个选择器跳出,此时就可以使用 @at-root。
.a {
color: red;
.b {
color: orange;
.c {
color: yellow;
@at-root .d {
color: green;
}
}
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
编译出来的CSS
.a {
color: red;
}
.a .b {
color: orange;
}
.a .b .c {
color: yellow;
}
.d {
color: green;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
@debug
@debug 在 Sass 中是用来调试的,当你的在 Sass 的源码中使用了 @debug 指令之后,Sass 代码在编译出错时,在命令终端会输出你设置的提示 Bug:
@debug 10em + 12em;
- 1
输出
Line 1 DEBUG: 22em
- 1
@warn
@warn 和 @debug 功能类似,用来帮助我们更好的调试 Sass。如:
@mixin adjust-location($x</span>, <span class="hljs-variable">$y) {
@if unitless($x) {
@warn "Assuming #{$x} to be in pixels";
$x</span><span class="hljs-symbol">:</span> <span class="hljs-number">1</span>px * <span class="hljs-variable">$x;
}
@if unitless($y) {
@warn "Assuming #{$y} to be in pixels";
$y</span><span class="hljs-symbol">:</span> <span class="hljs-number">1</span>px * <span class="hljs-variable">$y;
}
position: relative; left: $x</span>; <span class="hljs-symbol">top:</span> <span class="hljs-variable">$y;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
@error
@error 和 @warn、@debug 功能是如出一辙。
@mixin error($x){
@if $x < 10 {
width: $x * 10px;
} @else if $x == 10 {
width: $x;
} @else {
@error "你需要将#{$x}值设置在10以内的数";
}
}
.test {
@include error(15);
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
编译时
你需要将15值设置在10以内的数 on line 7 at column 5
- 1
<link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/markdown_views-ea0013b516.css">
</div>