文章目录
安装编译不讲了,这里只讲语法
此笔记参照此视频第八集往后制作
注释
//多行注释
/* 内容 */
//单行注释
// 内容
//快捷键
ctrl+/ //windows
command+/ //apple
编译输出的css格式
nested 嵌套
compact 紧凑
expanded 扩展
compressed 压缩
变量
//定义变量
$ 变量名 : 属性值
//例如
//定义变量border,值为1px solid #ccc
$border:1px solid #ccc
$width:200px
//使用
div{
width:$width;
hight:$width;
border:$border
}
//上面的意思就是给div定义宽高200px,边框1px实线灰色
嵌套
//如下格式
ul{
width:200px
li{
width:100px
p{
border:1px solid red
}
}
}
//等同于
ul{
width:200px
}
ul li{
width:100px
}
ul li p{
border:1px solid red
}
嵌套时调用父选择器
ul{
width:200px
li{
width:100px
p{
border:1px solid red
:hover{
color:red
}
}
}
}
//等同于
ul{
width:200px
}
ul li{
width:100px
}
ul li p{
border:1px solid red
}
ul li p :hover{ //这样的话中间有个空格
border:1px solid red
}
//修改如下:
---------------------------------------------------------------------
ul{
width:200px
li{
width:100px
p{
border:1px solid red
&:hover{ //&代表子而不是后代
color:red
}
}
}
}
//等同于
ul{
width:200px
}
ul li{
width:100px
}
ul li p{
border:1px solid red
}
ul li p:hover{ //这样的话中间没有空格了
border:1px solid red
}
属性嵌套
body{
font-size: 20;
font-weight: 700;
border: 1px solid;
border-left: 0;
border-right: 0; //这里面的font和border都拥有多个属性,这时可以用属性嵌套
}
//修改如下
body {
font: {
size: 20;
weight: 700;
};
border: 1px solid {
left: 0;
right: 0;
};
}
//效果同上
混合MiMins
可以认为是有名字的定义好的样式,可以在任意地方使用,也可以添加参数
//格式
@mimin 名字 (参数1,参数2...){}
//不加参数写法
@mixin alert {
color:#ccc;
background-color: red;
//也可以在下面添加嵌套元素
a{
color:write
}
}
// 使用
.alert-warning {
@include alert()
}
//等同于
.alert-warning{
color: #ccc;
background-color: red;
}
.alert-warning a{
color:write
}
-----------------------------------------------------------------------------------------------------------
//加参数写法
@mixin alert($text-color,$background-color) { //参数必须加$开头(跟变量命名方式一样,多个参数需要加逗号)
color:$text-color;
background-color: $background-color;
//也可以在下面添加嵌套元素
a{
color:darken($background-color,10%) //darken这个方法可以加深颜色,参数二就是加深的程度
}
}
// 使用
.alert-warning {
@include alert(#ccc,red) //这个按照顺序写的,也可以单独指定
//@include alert($background-color:red,$text-color:#ccc) //这样就可以根据参数指定值(不受顺序影响)
}
//等同于
.alert-warning{
color: #ccc;
background-color: red;
}
.alert-warning a{
color:加深后的值
}
继承/扩展(@extend)-inheritance
.alert {
padding: 15px;
}
.alert-info {
@extend .alert; //继承了.alert的样式
background-color: #ccc;
}
//等同于
.alert,.alert-info{
padding: 15px;
}
.alert-info{
background-color: #ccc;
}
--------------------------------------
//下面这个给继承的样式加了个后代a标签的样式,那么继承于这个alert的class也自动继承了这个a标签样式
.alert {
padding: 15px;
}
.alert a{
font-weight: 700;
}
.alert-info {
@extend .alert;
background-color: #ccc;
}
//等同于
.alert,.alert-info{
padding: 15px;
}
.alert a,.alert-info a{
font-weight: 700;
}
.alert-info{
background-color: #ccc;
}
Partials与import
由于每次使用@import,浏览器都会发出一次请求,都会消耗服务器资源,会让页面显示慢一些,scss扩展了@import功能,可以在一个scss文件里面将其他scss文件包含起来,将它们编译成一个css文件,这样可以把项目需要的样式分割成不同的小部分,用导入的方式把这些小部分包含到一个css文件里面,这些小部分在scss里面就是
Partials
//创建两个scss文件
//文件一:
body{
margin: 0;
padding: 0;
}
//文件二:
@import './app.scss'; //可以简写为 @import 'app'
.alert {
color: red;
}
//等同于:
body{
margin: 0;
padding: 0;
}
.alert {
color: red;
}
数据类型 -data type
type-of(5) //number
type-of(5px) //number
type-of(hello) //string
type-of("hello") //string
type-of(1px solid #000) //list
type-of(5px 10px) //list
type-of(#ff0000) //color
数字类型
2 + 8 // 10
2 * 8 // 16
8 / 2 // 打印 8/2
// 例如下面表达式,'/'在scss有别的含义
font:16px/1.8 serif // '/'前面是字号,后面是行间距
// 如下方式可以解决
(8 / 2) // 4
5px + 5px // 10px
5px - 2 // 3px
5px * 2 // 10px
5px * 2px // 10px*px 注意 px * px 在scss并不是一个可用的单位
(10px / 2px) // 5 两个单位抵消掉
(10px / 2) // 5px 保留单位
3 + 2 * 5px // 13px 先算乘除后算加减
(3 + 2) * 5px // 25px 先算小括号的
数字类型函数(都有默认返回值)
// abs() 绝对值
abs(10) // 10
abs(10px) // 10px
abs(-10px) //10px
// round() 四舍五入
round(3.5) // 4
round(3.2) // 3
// ceil() 向上取整
ceil(3.2) // 4
ceil(3.1) // 4
// floor() 向下取整
floor(3.6) // 3
// percentage() //将数字转化百分号形式
percentage(650px / 1000px) // 65%
// min() 得到数字列表最小的
min(1,2,3,4) // 1
// max() 得到数字列表最大的
max(1,2,3,4) // 4
字符串类型
"ning" + hao // "ninghao"
ning + "hao" // "ninghao"
"ninghao" + 8080 // "ninghao8080"
ning - hao // ning-hao
ning / hao // "ning/hao"
ning * hao //SyntaxError: Undefined operation: "ning times hao". 这里报错了,两个字符串相乘没有意义
字符串类型函数
//定义一个变量
$greeting: "Hello ninghao"
//输出变量
$greeting // "Hello ninghao"
//以下为字符串类型函数
// to-upper-case() 将所有字母转大写
to-upper-case($greeting) // "HELLO NINGHAO"
// to-lower-case() 将所有字母转小写
to-lower-case($greeting) // "hello ninghao"
// str-length() 返回字符串的长度
str_length($greeting) // 13 包含空格
// str-index() 确定字符串开始位置 (两个参数:参数一:检查的字符串,参数二:判断位置的字符串)
str-index($greeting,"Hello") // 1
str-index($greeting,"ninghao") // 7
// str-insert() 在指定位置插入字符 (三个参数:参数一:插入的目标字符串,参数二:插入的内容,参数三:插入的位置)
str-insert($greeting,".net",14) // "Hello ninghao.net"
颜色的表示
Hex
#ff0000 十六进制表示
RGB
RGB(255,0,0)
String
red,green,blue
hsl
hsl(0 , 100% , 50%)
颜色函数一: rgb和rgba
// rgb(红,绿,蓝) 范围(0~255)
background-color: rgb(255, 0, 0); //等同于css的 background-color: red;
background-color: rgb(100%, 0, 0); //等同于css的 background-color: red;
background-color: rgb(255, 100, 0); //等同于css的 background-color: #ff6400;
background-color: rgb(255, 255, 0); //等同于css的 background-color: yellow;
// reba(红,绿,蓝,透明度) 红绿蓝范围(0~255) 透明度范围(0-1)
background-color: rgba(255, 255, 0 ,0.1); //等同于css的 background-color: rgba(255, 255, 0 ,0.1);
颜色函数二: hsl和hsla
HSl
// hsl(色相 , 饱和度 , 明度)
background-color: hsl(0, 100%, 50%); //等同于css的 background-color: red;
background-color: hsl(60, 100%, 50%); //等同于css的 background-color: yellow;
HSLA
// hsla(色相 , 饱和度 , 明度 , 不透明度)
background-color: hsl(60, 100%, 50% , 0.5); //等同于css的 background-color: rgba(255 , 255 , 0 , 0.5);
颜色函数三: adjust-hue
//定义两个变量
$base-color: #ff0000;
$base-color-hsl: hsl(0,100,50%);
//使用 (两个参数: 参数一:要调整的颜色,参数二:要调整的度数(deg加不加都可以,加上更清楚))
background-color: adjust-hue($base-color-hsl, 137deg); //等同于 css的 background-color:#00ff48;
background-color: adjust-hue($base-color, 137deg); //等同于 css的 background-color:#00ff48; 与上面结果一致
颜色函数四: lighten和darken
// 这两个可以改变颜色的明度(lighten让颜色更亮,darken让颜色更暗)
// 都有两个参数:参数一:要处理的颜色,参数二:增加或减少的明度(在当前颜色的基础上增加或减少)
//这里定义三个变量(颜色和更改明度后的颜色)
$base-color: hsl(222,100%,50%)
$light-color: lighten($base-color,30%)
$darken-color: darken($base-color,20%)
border:1px solid $base-color //等同于 css的 border:1px solid #004cff;
background-color: $light-color //等同于 css的 background-color: #99b8ff;
color:$darken-color //等同于 css的 color: #002e99;
颜色函数五: saturate和desaturate
// saturate()增加颜色的饱和度(纯度)
// desaturate()减少颜色的饱和度(纯度)
// 都有两个参数:参数一:要处理的颜色, 参数二:要增加或者减少的饱和度(在原来基础上增加或者减少)
//这里定义三个变量(颜色和更改纯度后的颜色)
$base-color: hsl(221,50%,50%)
$saturate-color: saturate($base-color,50%)
$desaturate-color: desaturate($base-color,30%)
background-color: $saturate-color; //等同于 css的 background-color: #0051ff;
color:$desaturate-color; //等同于 css的 color: #667699;
颜色函数六: opacify和transparentize
// transparentize() 增加透明度(相当于减少不透明度)
// opacify() 增加不透明度
// 都有两个参数:参数一:要处理的颜色, 参数二:要增加/减少的透明度(取值0~1)
//这里定义三个变量(颜色和更改透明度后的颜色)
$base-color: hsla(222,100%,50%,0.5)
$fade-in-color:opacify($base-color,0.3); //增加后不透明度为0.8
$fade-out-color:opacify($base-color,0.2); //减少后不透明度为0.3
background-color: $fade-in-color; //等同于 css的 background-color: rgba(0 , 76 , 255 , 0.8);
color:$fade-out-color; //等同于 css的 color: rgba(0 , 76 , 255 , 0.3);
List列表
border:1px solid red; //这就是一个列表 , 里面的数据是空格分割开的
font-family:Courier,"Lucida Console",monospace //这也是一个列表,使用逗号分割开的
padding: 5px 10px,5px 0 //这个包含两个列表,使用逗号分割开的 , 等同于 padding: (5px 10px)(5px 0) 编译时会去掉括号
列表函数
// length() 返回列表长度 参数:列表
length(5px 10px) // 2
length(5px 10px 5px 0) // 4
// nth() 返回序号号对应的元素(从1开始) 参数:参数一:列表,参数二:序号
nth(5px 10px,1) // 5px
nth(5px 10px,2) // 10px
// index() 返回对应元素的序号 参数:参数一:列表,参数二:要得到序号的元素
index(1px solid red , solid) // 2
// append() 在列表里面添加新的元素 参数:参数一:列表,参数二:要添加的元素
append(5px 10px, 5px) //(5px 10px 5px)
// join() 将两个列表合并为一个列表
//参数:
//参数一:列表
//参数二:列表二,
//参数三(可选,有默认值):分隔符(comma：使用逗号 , 分隔每个列表项；space（默认值）：使用空格 分隔每个列表项；auto：在使用变量时自动处理分隔)
join(5px 10px, 5px 0) // (5px 10px 5px 0)
join(5px 10px , 5px 0 , comma) // (5px , 10px , 5px , 0)
Map类型
// 格式
$map: (key1: value1, key2: value2, key3 : value3)
//使用
$colors:(light:#ffffff, dark: #000000) // (light: #ffffff, dark: #000000)
length($colors) // 2
Map类型函数
//定义变量
$colors:(light:#ffffff, dark: #000000)
// map-get() 根据项目名字得到map的值 参数一:当前map项目 , 参数二: 项目的key
map-get($colors, light) // #ffffff
map-get($colors, dark) // #000000
// map-keys() 得到项目的所有key 参数:当前map项目
map-keys($colors) // ("light" , "dark")
// map-values() 得到项目的所有value 参数:当前map项目
map-values($colors) // (#ffffff , #000000)
// map-has-key() 检测项目是否包含某个key 参数一:当前map项目, 参数二:检测要包含的key 返回boolean类型
map-has-key($colors, light) // true
map-has-key($colors, gray) // false
// map-merge() 将两个map类型合并一起 参数:参数一:map项目一,参数二:map项目二
map-merge($colors , (light-gray: #e5e5e5)) // (light: #ffffff, dark: #000000 , light-gray: #e5e5e5)
//可以把结果返回给$colors
$colors: map-merge($colors , (light-gray: #e5e5e5))
//再查看一下$colors
$colors // (light: #ffffff, dark: #000000 , light-gray: #e5e5e5)
// map-remove() 移除项目key 参数:参数一:当前map项目 参数二:要移除的key1,参数三:要移除的key2, 参数四:......
map-remove($colors,light,dark) // (light-gray: #e5e5e5)
true/false 布尔值
5px > 3px //true
5px > 10px //false
5px < 10px //true
(5px >3px) and (5px > 10px) // false
(5px >3px) and (5px < 10px) // true
(5px >3px) or(5px > 10px) //true
(5px >3px) or (5px < 10px) //true
not(5px > 3px) //false not代表取反
not(5px < 3px) //true
interpolation
//使用interpolation语法可以在样式选择器或者属性上面使用变量或者表达式
//以下的#{}就是interpolation语法,类似于js的模板字符串,在注释里面放变量,原本写法为: /* 项目当前版本为: $version */
$verson:"0.0.1"; //项目版本号
/* 项目当前版本为: #{$version} */
// 在变量中使用
$name: "info"
$attr: "border"
.alert-#{$name}{
#{$attr}-color: #ccc
}
//编译后如下
@charset "UTF-8"
/* 项目当前版本为: 0.0.1 */
.alert-info{
border-color: #ccc
}
Control Directives
在定义复杂的mimin或者函数时,可能会用到一些控制的指令,比如做条件的判断(
@if),当满足了特定的条件后才去做一些事情,或者可能需要去使用@for循环一定次数的;来输出一些样式,使用@each可以循环的处理在一个列表数据里面的每一个项目,比如要根据列表中的项目循环的输出一些样式,使用@while也可以循环的去做一些事情
@if
//格式: @if 条件 {...}
//案例
$use-prefixes: false;
.rounded{
@if $use-prefixes {
colors:#ccc;
}
border-radius: 50%;
}
//等同于
.rounded {
border-radius: 50%;
}
//案例二
$use-prefixes: true;
.rounded{
@if $use-prefixes {
colors:#ccc;
}
border-radius: 50%;
}
//等同于
.rounded {
colors:#ccc;
border-radius: 50%;
}
//案例三
$theme:"dark";
body{
@if $theme == dark {
background-color: black;
}@else if $theme == light {
background-color: white;
}@else {
background-color: grey;
}
}
//等同于
body{
background-color: black;
}
@for
//语法 @for 变量 from <开始值> through <结束值> {...}
//示例
$colums: 4;
// through包含结束的值 to不包含结束的值
@for $i from 1 through $colums { //意思为从1~4之间的循环,循环的每一项用$i表示
.col- #{$i} {
width: 100% / $colums * $i;
}
}
//等同于
.col-1 {
width: 25%;
}
.col-2 {
width: 50%;
}
.col-3 {
width: 75%;
}
.col-4 {
width: 100%;
}
// 换成to再演示一下
// through包含结束的值 to不包含结束的值
@for $i from 1 to $colums { //意思为从1~4之间的循环,循环的每一项用$i表示
.col- #{$i} {
width: 100% / $colums * $i;
}
}
//等同于
.col-1 {
width: 25%;
}
.col-2 {
width: 50%;
}
.col-3 {
width: 75%;
}
@each
//语法 @each 变量 in 列表 {...}
//示例
$icons: success error warning;
@each $icon in $icons {
.icon-#{$icon} {
background-image: url(../images/icon/#{$icon}.png);
}
}
//等同于
.icon-success{
background-image: url(../images/icon/success.png);
}
.icon-error {
background-image: url(../images/icon/error.png);
}
.icon-warning {
background-image: url(../images/icon/warning.png);
}
@while
// 语法: @while 条件 {...}
//示例
$i: 6;
@while $i > 0 {
.item-#{$i} {
width: 5px * $i;
}
$i: $i - 2; //每次循环完将$i值减2,不然$i一直大于零就无限循环了
}
//等同于
.item-6 {
width: 30px;
}
.item-4 {
width: 20px;
}
.item-2 {
width: 10px;
}
用户自定义函数 function
// 语法: @function 名称 (参数1 , 参数2){...}
//定义函数,传入一个key值,可以得到列表的某个key对应的值
$colors: (light:#ffffff, dark: #000000);
@function color($key){
//@return 可以返回数据
//map-get($colors , $key ) 前面讲过这个方法
@return map-get($colors , $key )
}
body{
background-color: color(light);
}
//等同于
body{
background-color: #ffffff;
}
警告与错误
//在自己设计的函数或者mimin里面,可以包含一些警告或者错误的提示信息,让用户在错误使用了函数或者mimin时,可以看到这些提示信息
// @warn()方法显示警告 @
$colors: (light:#ffffff, dark: #000000);
@function color($key){
//当用户传的参数没有在列表$colors里面找到时 给出一个警告提示
@if not map-has-key($colors,$key){
@warn "在$color里没找到 #{$key} 这个key"
}
@return map-get($colors , $key )
}
body{
background-color: color(gray);
}
//等同于(这里看控制台的警告信息) (把上面的@warn改成@error就是错误信息了,控制台的WARNING会变成Error)
WARNING: 在$color里没找到 gray 这个key
on line 5 of sass/style.scss
504
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
