遵义做网站公司,海南省建设与执业资格注册中心网站,东台专业做网站,济南网站建设咨询小七目录
为什么引入css预处理器
可读性
嵌套#xff1a;关系明朗
选择器
属性
伪类‘’
变量#xff1a;语义明确
默认变量#xff1a;美元符号 $ 变量名:值 !default
全局变量#xff1a;:global { $global-x: }
变量插值#xff1a;#{}
map键值对#xff1a;$…目录
为什么引入css预处理器
可读性
嵌套关系明朗
选择器
属性
伪类‘’
变量语义明确
默认变量美元符号 $ 变量名:值 !default
全局变量:global { $global-x: }
变量插值#{}
map键值对$变量名:( key:值,...)
可维护性
混入指令/混合指令/宏指令mixin函数传参提高样式的复用率
不带参数混合宏
带参数混合宏
带特别多参数混合宏
调用混合宏include
继承extend提高复用率
占位符 %placeholder不产生代码的可继承样式
混合宏、继承、占位符
什么情况不适用
sassscss
后缀扩展名
语法书写方式
sass和less
编译
Sass在服务端处理的
Less在客户端使用Less.js
语法
插值#{}
注释
加减法
乘法
除法
if else if else条件
for
while循环
each循环
import引入 SCSS 和 Sass 为什么引入css预处理器
提高CSS代码的可读性和可维护性
可读性
嵌套关系明朗
选择器
#css
nav a {color:red;
}
header nav a {color:green;
}
#scss
nav {a {color: red;header {color:green;}}
}
属性
#css
.box {border-top: 1px solid red;border-bottom: 1px solid green;
}
#scss
.box {border: {top: 1px solid red;bottom: 1px solid green;}
}
伪类‘’
.clearfix{:after {clear:both;overflow: hidden;}
}
变量语义明确
默认变量美元符号 $ 变量名:值 !default
$link-color: #3498db !default;a {color: $link-color; // 如果未定义 $link-color则使用默认值 #3498db
}全局变量:global { $global-x: }
:global {$global-padding: 10px;
}.box {padding: $global-padding;
}变量插值#{}
$theme: light;body {background-color: #{$theme}-background; // 将变量插入到字符串中
}map键值对$变量名:( key:值,...)
$colors: (primary: #3498db,secondary: #2ecc71,accent: #e74c3c
);.box {background-color: map-get($colors, primary);
}可维护性
混入指令/混合指令/宏指令mixin函数传参提高样式的复用率
相当于预先写好了一组样式其它地方传参/直接引用
Vue中叫它混入指令可以设置参数复用重复代码块。
但会生成冗余的代码块。比如在不同的地方调用一个相同的混合宏时不能将两个合成并集形式。
不带参数混合宏
mixin border-radius{border-radius: 5px;
}
带参数混合宏
# 带值参数
mixin border-radius($radius){border-radius: $radius;
}
# 带默认值参数
mixin border-radius($radius:5px){border-radius: $radius;
}带特别多参数混合宏
当混合宏传的参数过多之时可以使用“…”来替代
# 带多个参数
mixin center($width,$height){width: $width;height: $height;margin-top: -($height) / 2;margin-left: -($width) / 2;
}
# 带特别多参数
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;}
}
调用混合宏include
关键词“include”来调用声明好的混合宏
button {include border-radius;
}
.box {include border-radius(3px);
}
.box-center {include center(500px,300px);
}
.box {include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
}
继承extend提高复用率
子类里继承了父类及其子类
.one{color: #000;
}
.one a{font-size: 10px;
}
.two{extend .one;background-color: #fff;
}编译出来的 CSS 会将选择器合并在一起形成组合选择器.
.one, .two {color: #000;
}.one a, .two a {font-size: 10px;
}.two {background-color: #fff;
}占位符 %placeholder不产生代码的可继承样式 %声明的代码如果不被 extend 调用的话不会产生任何代码
%mt5 {margin-top: 5px;
}
.btn {extend %mt5;
}
.block {extend %mt5;
}
通过 extend 调用的占位符编译出来的代码会将相同的代码合并在一起.
.btn, .block {margin-top: 5px;
}
混合宏、继承、占位符 什么情况不适用
越直观越好运算类型特别是map类型的尽量不要在实际项目中使用后续维护成本很高的。
sassscss
平时都称之为 Sass
后缀扩展名
Sass “.sass”SCSS “.scss”
语法书写方式
Sass 是以严格的缩进式语法规则来书写不带大括号({})和分号(;)SCSS 的语法书写和我们的 CSS 语法书写方式非常类似 sass和less
编译
Sass在服务端处理的
Less在客户端使用Less.js
语法
插值#{}
1构建一个选择器
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);
(2) 属性变量
$properties: (margin, padding);
mixin set-value($side, $value) {each $prop in $properties {#{$prop}-#{$side}: $value;}
}
.login-box {include set-value(top, 14px);
} mixin中插值不能作为赋值语句的值部分只能用做属性名定义或者选择器构建时include中不能使用插值 注释
1、类似 CSS 的注释方式使用 ”/* ”开头结属使用 ”*/ ”
2、类似 JS的注释方式使用“//” 两者区别
前者会在编译出来的 CSS 显示后者在编译出来的 CSS 中不会显示
加减乘除连带单位一起计算
加减法
在变量或属性中都可以做加法运算但对于携带不同类型的单位时在 Sass 中计算会报错
.content {width: $full-width - $sidebar-width;
}
字符串拼接
div {cursor: e -resize;
}
编译后
div {cursor: e-resize;}
乘法
当一个单位同时声明两个值时会有问题 只能有一个值带单位比如 em ,px , %
# 编译的时候报“20px*px isnt a valid CSS value.”错误信息。
.box {width:10px * 2px;
}# 正确的写法
.box {width: 10px * 2;
}除法
如果数值或它的任意部分是存储在一个变量中或是函数的返回值。 • 如果数值被圆括号包围。 • 如果数值是另一个数学表达式的一部分 在除法运算时如果两个值带有相同的单位值时除法运算之后会得到一个不带单位的数值 .box {width: (1000px / 100px);
}
编译后
.box {width: 10;
}
if else if else条件
mixin blockOrHidden($boolean:true) {if $boolean {display: block;}else {display: none;}
}
.block {include blockOrHidden;
}
.hidden{include blockOrHidden(false);
}for
for $i from start through end
for $i from start to end
关键字 through 表示包括 end 而 to 则不包括 end
for $i from 1 through 3 {.item-#{$i} { width: 2em * $i; }
}
while循环
while $types 0 {.while-#{$types} {width: $type-width $types;}$types: $types - 1;
}
each循环
each 循环就是去遍历一个列表然后从列表中取出对应的值
each $var in list
$list: adam john wynn mason kuroir;
mixin author-images {each $author in $list {.photo-#{$author} {background: url(/images/avatars/#{$author}.png) no-repeat;}}
}
.author-bio {include author-images;
}
import引入 SCSS 和 Sass
Sass 扩展了 CSS 的 import 规则让它能够引入 SCSS 和 Sass 文件。 所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一
Sass总结笔记 基础入门超级直观细节 - 掘金
