sass
编译
手动编译
sass 源目录:目标目录
自动编译
sass --watch 源目录:目标目录
sass --watch scss:css
sass --watch scss:css --style compact # 格式化方式缩紧
sass --watch scss:css --style compressed # 格式化方式压缩
sass --watch scss:css --style expanded# 格式化方式展开
变量
定义变量使用
$
符号
// 定义一个变量
$primary-color:red;
// 同时支持多个值
$primary-border: 1px solid $primary-color;
body{
// 使用变量
color: $primary-color;
border:$primary-border;
}
body {
color: red;
border: 1px solid red;
}
/*# sourceMappingURL=%E5%8F%98%E9%87%8F.css.map */
嵌套
适量的使用嵌套 可提高代码复用性
.nav{
height: 100px;
ul{
margin:0;
li{
float:left;
list-style:none;
padding:5px;
}
}
}
.nav {
height: 100px;
}
.nav ul {
margin: 0;
}
.nav ul li {
float: left;
list-style: none;
padding: 5px;
}
/*# sourceMappingURL=%E5%B5%8C%E5%A5%97.css.map */
引用父选择器
&
表示 父选择器
.nav{
height: 100px;
ul{
margin:0;
li{
float:left;
list-style:none;
padding:5px;
&:hover{
font-weight: bolder;
}
}
}
& &-text{
font-size: 15px;
}
}
.nav {
height: 100px;
}
.nav ul {
margin: 0;
}
.nav ul li {
float: left;
list-style: none;
padding: 5px;
}
.nav ul li:hover {
font-weight: bolder;
}
.nav .nav-text {
font-size: 15px;
}
/*# sourceMappingURL=%E5%B5%8C%E5%A5%97.css.map */
属性嵌套
属性也可用来嵌套
// 属性嵌套
body {
font: {
family: "Arial";
size: 15px;
weight: bolder;
}
}
.nav{
border: 1px solid red{
left:10px;
right:10px;
}
}
body {
font-family: "Arial";
font-size: 15px;
font-weight: bolder;
}
.nav {
border: 1px solid red;
border-left: 10px;
border-right: 10px;
}
/*# sourceMappingURL=%E5%B5%8C%E5%A5%97.css.map */
混合
@mixin 名字(param1,param2...){
...
}
定义一个mixin
定义:@mixin name
使用:@include mixinName
@mixin alert {
color: red;
background-color:blue;
a{
color: yellow;
}
}
.alert-warning{
@include alert;
}
.alert-warning {
color: red;
background-color: blue;
}
.alert-warning a {
color: yellow;
}
/*# sourceMappingURL=mixin.css.map */
mixiin参数
// 定义
@mixin alert-e($text-color,$background) {
color: $text-color;
background-color:$background;
a{
// darken 函数 调整颜色深浅
color:darken($text-color,10%);
}
}
// 调用
.aler-error{
@include alert-e(red,red);
}
.aler-error {
color: red;
background-color: red;
}
.aler-error a {
color: #cc0000;
}
指定参数
.alert-info{
// 手动指定参数
@include alert-e($background:#b89,$text-color:#473);
}
.alert-info {
color: #473;
background-color: #b89;
}
.alert-info a {
color: #305324;
}
样式继承
继承样式:@extend
会继承所有样式
.alert{
padding:15px;
a{
color: #838383;
}
}
.alert-info{
// 继承 所有样式
@extend .alert;
background-color: #d9eda1;
}
.alert, .alert-info {
padding: 15px;
}
.alert a, .alert-info a {
color: #838383;
}
.alert-info {
background-color: #d9eda1;
}
/*# sourceMappingURL=%E7%BB%A7%E6%89%BF-%E6%89%A9%E5%B1%95.css.map */
导入样式
导入:@import
@import "./嵌套.scss";
body{
margin:0;
}
.nav {
height: 100px;
}
.nav ul {
margin: 0;
}
.nav ul li {
float: left;
list-style: none;
padding: 5px;
}
.nav ul li:hover {
font-weight: bolder;
}
.nav .nav-text {
font-size: 15px;
}
body {
font-family: "Arial";
font-size: 15px;
font-weight: bolder;
}
.nav {
border: 1px solid red;
border-left: 10px;
border-right: 10px;
}
body {
margin: 0;
}
/*# sourceMappingURL=%E5%AF%BC%E5%85%A5.css.map */
注释
- 单行注释
- 多行注释
- 强制注释
/*
多行注释
通常不会在css里面保留
如果 模式 是 expanded 则会在css里面保留
*/
// 单行注释 同样也不会在css 里面保留
/*!
强制注释 强制在 css里面保留
*/
数据类型
sass -i 打开交互式环境
> sass -i
>> type-of(1)
"number"
>> type-of("1")
"string"
>> type-of(hello)
"string"
>> type-of(1xp solid red)
"list"
>> type-of(5px 10px)
"list"
>> type-of(#ff0000)
"color"
>> type-of(red)
"color"
number
sass可以直接进行运算
需要注意: 除法运算 需要用到 括号
> sass -i
>> 1 + 2
3
>> 2 * 3
6
# 特别注意
>> 8 / 4
8/4
# 带括号才能算出值
>> (8 /2)
4
>> 5px + 6px
11px
>> 5px -2
(5px -2)
>> 5px - 2
3px
>> 5px * 2
10px
>> (10px / 2px)
5
>> (10px /2)
5px
>> 3 + 2 * 5px
13px
数字函数
# 绝对值
>> abs(-10)
10
>> abs(-10px)
10px
# 四舍五入
>> round(3.5)
4
>> round(2.4)
2
# 向上取整
>> ceil(3.1)
4
>> ceil(2.9)
3
# 向下取整
>> floor(2.8)
2
>> floor(2.1)
2
# 百分比
>> percentage(650px / 1000px)
65%
# 最大值
>> max(1,2,3,)
3
# 最小值
>> min(1,2,3,)
1
string
# 字符串相加
>> "hello"+"world"
"helloworld"
>>
>> "hello"+"world"
"helloworld"
# 带引号 与不带引号 相加 结果 带引号
>> “tom” + jerry
"tomjerry"
# 不带引号 与带引号 相加 结果 不带引号
>> tom + " " + "jerry"
"tom jerry"
# 字符串和 数字相加 结果是 字符串
>> "china " + 10086
"china 10086"
# 字符串和字符串相减 结果是字符串
>> jack - alice
"jack-alice"
# 字符串直接相除 字符串拼接
>> 14px/1.8
14px/1.8
字符串函数
>> $word:"Hello,World!"
"Hello,World!"
# 到大写
>> to-upper-case($word)
"HELLO,WORLD!"
# 到小写
>> to-lower-case($word)
"hello,world!"
# 字符串长度
>> str-length($word)
12
# 字符串位置
>> str-index($word,"world")
null
>> str-index($word,"World")
7
# 字符串插入
>> str-insert($word,"123",4)
"Hel123lo,World!"
颜色
- rgb
- hex
- Hsl
# rgb
>> rgb(88,88,88)
#585858
>> rgb(60%,88,88)
#995858
>>
# rgba --- alpha 透明度
>> rgba(66, 66, 66 ,0.8)
rgba(66, 66, 66, 0.8)
# 色相 饱和度 明度
>> hsl(0,100%,50%)
#ff0000
>>
# 色相 饱和度 明度 透明度
>> hsla(0,100%,50%,0.3)
rgba(255, 0, 0, 0.3)
>>
# 调整色相
>> adjust-hue(#ff0000,137deg)
#00ff48
# 调整明度
# lighten 亮
>> lighten(red,20%)
#ff6666
# darken 暗
>> darken(red,20%)
#990000
# 调整饱和度
>> saturate(red,30%)
#ff0000
>> desaturate(red,20%)
#e61a1a
# 透明度
>> opacify(red,0.2)
#ff0000
>> transparentize(red,0.4)
rgba(255, 0, 0, 0.6)
列表
>> 1 2 3
(1 2 3)
>> 1, 2, 3
(1, 2, 3)
列表函数
# 列表长度
>> length(1px 2px 3px)
3
# 访问列表元素
>> nth(3px 1px 2px,2)
1px
>> nth(3px 1px 2px,1)
3px
# 查找元素索引
>> index(1px 2px 3px,3px)
3
# 添加元素
>> $nums:1 2 3
>> append($nums,4)
(1 2 3 4)
>> append(1px 2px,3px)
(1px 2px 3px)
# 列表合并
>> join(5px 10px,1px 2px)
(5px 10px 1px 2px)
# 逗号分隔
>> join(5px 10px,1px 2px,comma)
(5px, 10px, 1px, 2px)
map
键值对
>> $colors:(light:rgb(255,0,0),medium:rgb(230,0,0),fade:rgb(180,0,0))
(light: red, medium: #e60000, fade: #b40000)
# map 大小
>> length($colors)
3
# 访问 map
>> map-get($colors,medium)
#e60000
# 查看所有 key
>> map-keys($colors)
("light", "medium", "fade")
# 查看所有值
>> map-values($colors)
(#ff0000, #e60000, #b40000)
# 是否包含该key
>> map-has-key($colors,light)
true
>> map-has-key($colors,dark)
false
# map合并
>> map-merge($colors,(dark:rgb(0,0,0)))
(light: red, medium: #e60000, fade: #b40000, dark: black)
# 移除元素
>> map-remove($colors,light,fade)
(medium: #e60000)
布尔值
>> 5px > 3px
true
>> 5px >10px
false
>> 5px == 5px
true
# and
>> 5px >3px and 3px <5px
true
>> 5px >3px and 3px>5px
false
>>
# or
>> 5px >3px or 3px>5px
true
# not
>> not(1>2)
true
>> not(1<2)
false
interpolation 插值
#{$变量名}
$version:"0.0.1";
$name:"success";
$attr:"border";
/*!
project: #{$version}
*/
.alert-#{$name}{
font-size: 10px;
#{$attr}:1px solid red;
}
/*!
project: 0.0.1
*/
.alert-success {
font-size: 10px;
border: 1px solid red;
}
/*# sourceMappingURL=interpolation.css.map */
控制指令
- for...each...
- while
if else
@if $var{
}
@else{
}
@if else{
}
$is-other: false;
$dark-mode: false;
$theme:"github";
body{
@if $dark-mode {
background-color:black;
}@else if $theme=="github" {
background-color:gray;
}@else{
background-color:white;
}
}
.rounder{
@if $is-other {
-webkit-border-radius:5px;
}@else{
border-radius: 5px;
}
}
body {
background-color: gray;
}
.rounder {
border-radius: 5px;
}
/*# sourceMappingURL=%E6%B5%81%E7%A8%8B%E6%8E%A7%E5%88%B6.css.map */
for...from throuth
for $var from <start> through <end>{
...
}
$colums:4;
// 闭区间
@for $var from 1 through $colums{
.col-#{$var}{
width: (100% / $colums);
font-size: 10px;
}
}
.col-1 {
width: 25%;
font-size: 10px;
}
.col-2 {
width: 25%;
font-size: 10px;
}
.col-3 {
width: 25%;
font-size: 10px;
}
.col-4 {
width: 25%;
font-size: 10px;
}
for...from to
@for $var from start to end{
...
}
// 开区间
@for $var from 1 to $colums{
.col-to-#{$var}{
width: (100% / $colums);
font-size: 10px;
}
}
.col-to-1 {
width: 25%;
font-size: 10px;
}
.col-to-2 {
width: 25%;
font-size: 10px;
}
.col-to-3 {
width: 25%;
font-size: 10px;
}
@each in
@each $var in $vars{
...
}
$colors:red orange yellow green blue lightgreen violet;
#app{
height:200px;
}
@each $color in $colors{
.block-#{index($colors,$color)}{
background-color:$color;
height: (100% / length($colors));
}
}
.block-1 {
background-color: red;
height: 14.2857142857%;
}
.block-2 {
background-color: orange;
height: 14.2857142857%;
}
.block-3 {
background-color: yellow;
height: 14.2857142857%;
}
.block-4 {
background-color: green;
height: 14.2857142857%;
}
.block-5 {
background-color: blue;
height: 14.2857142857%;
}
.block-6 {
background-color: lightgreen;
height: 14.2857142857%;
}
.block-7 {
background-color: violet;
height: 14.2857142857%;
}
$condition: (success:green, warning:orange, error:red);
@each $key,$val in $condition {
.alert-#{$key}{
color: $val;
background-color: black;
}
}
.alert-success {
color: green;
background-color: black;
}
.alert-warning {
color: orange;
background-color: black;
}
.alert-error {
color: red;
background-color: black;
}
while
while 条件{
}
$i:0;
@while $i!=5{
$i:$i+1;
.item-#{$i}{
width:5px *$i;
}
}
.item-1 {
width: 5px;
}
.item-2 {
width: 10px;
}
.item-3 {
width: 15px;
}
.item-4 {
width: 20px;
}
.item-5 {
width: 25px;
}
自定义函数
$dark-mode:false;
$theme-mode:(light:rgb(255, 255, 255), dark:rgb(0, 0, 0));
@function color($mode) {
$default: map-get($theme-mode, light);
$res: map-get($theme-mode, $mode);
@if $res==null {
@return $default;
}
@return $res;
}
@if $dark-mode {
body {
background-color: color(dark);
p {
color: color(light);
}
}
}
@else {
body {
background-color: color(light);
p {
color: color(dark);
}
}
}
body {
background-color: white;
}
body p {
color: black;
}
/*# sourceMappingURL=%E8%87%AA%E5%AE%9A%E4%B9%89%E5%87%BD%E6%95%B0.css.map */
警告
会在控制台出现
@function division($a,$b){
@if b==0{
// @warn "不合法的数据";
@error "不合法的数据";
}
@return ($a / $b);
}
body{
width: division(100,0);
}