SCSS使用技巧-中级
🍑混合器（函数）
🍑声明一个函数@mixin
- 有重复的代码片段都可以考虑使用混合器将他们提取出来复用
- 混合器作用域内的属性都是return的值
🍑 (参考测试)
@mixin border-radius {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
color: red;
}
- 🌵仙人掌是传参数了
- 🥒黄瓜是默认值
🍎🍌可以为函数传参数🌵
@mixin get-border-radius($border-radius, $color) {
-moz-border-radius: $border-radius;
-webkit-border-radius: $border-radius;
border-radius: $border-radius;
color: $color;
}
🍎🍌🍌设置混合器的默认值🥒
@mixin get-border-radius($border-radius: 5px, $color: red) {
-moz-border-radius: $border-radius;
-webkit-border-radius: $border-radius;
border-radius: $border-radius;
color: $color;
}
🍎🍌🍌🍌使用函数@include
.container {
border: 1px solid #aaa;
@include get-border-radius; //不传参则为默认值5px🥒
/* 占个位置 */
@include get-border-radius(10px, blue); //传参🌵
}
🍎🍌🍌🍌🍌多个参数时，传参指定参数的名字，可以不用考虑传入的顺序
.container {
border: 1px solid #aaa;
@include get-border-radius; //不传参则为默认值5px🥒
/* 占个位置 */
@include get-border-radius($color: blue, $border-radius: 10px); //传参🌵
}
这是以上的混合函数转化为
css样式
- CSS
/*
🌵仙人掌是传参数了
🥒黄瓜是默认值
*/
@charset "UTF-8";
.container {
border: 1px solid #aaa;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
color: red;
/* 占个位置 */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: blue;
}
.container {
border: 1px solid #aaa;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
color: red;
/* 占个位置 */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: blue;
}
🍎🍎函数插槽@content
- SCSS
$color: white;
@mixin colors2($color: #f0f000) {
background-color: $color;
@content;
border-color: $color;
}
.colors1 {
@include colors2 {
color: $color;
}
}
- CSS
.colors1 {
background-color: #f0f000;
color: white;
border-color: #f0f000;
}
🍎🍎🍌继承 @extend
-
一个已经存在的css样式类，可以被其他样式类继承。
-
SCSS
.btn {
border: 1px solid blue;
}
.btn--primary {
color: black;
@extend .btn;
}
.btn--info {
color: gray;
@extend .btn;
}
- CSS
.btn, .btn--primary, .btn--info {
border: 1px solid blue;
}
.btn--primary {
color: black;
}
.btn--info {
color: gray;
}
🍎🍎🍌🍌继承多个选择器
- SCSS
.one {
width: 100px;
height: 100px;
}
.two {
/*继承的简便写法*/
@extend .one, .three;
/*独立的样式*/
background: red;
border: 5px solid #000;
}
.three {
padding: 10px;
}
- CSS
@charset "UTF-8";
.one, .two {
width: 100px;
height: 100px;
}
.two {
/*继承的简便写法*/
/*独立的样式*/
background: red;
border: 5px solid #000;
}
.three, .two {
padding: 10px;
}
🍎🍎🍌🍌🍌链型继承
-
类名
.three继承类名.two，而类名.two又继承了类名.one -
SCSS
.one {
width: 100px;
height: 100px;
}
.two {
/*继承的样式*/
@extend .one;
/*独立的样式*/
background: red;
border: 5px solid #000;
}
.three {
/*继承的样式*/
@extend .two;
/*独立的样式*/
padding: 10px;
}
- CSS
@charset "UTF-8";
.one, .two, .three {
width: 100px;
height: 100px;
}
.two, .three {
/*继承的样式*/
/*独立的样式*/
background: red;
border: 5px solid #000;
}
.three {
/*继承的样式*/
/*独立的样式*/
padding: 10px;
}
🍑测试
- SCSS
.w-150 {
width: 150px;
}
.h-150 {
height: 150px;
}
.border {
border: 1px solid #f0f;
@extend .h-150, .w-150;
}
.test {
@extend .border;
}
- CSS
.w-150, .border, .test {
width: 150px;
}
.h-150, .border, .test {
height: 150px;
}
.border, .test {
border: 1px solid #f0f;
}
🍎🍎🍎占位符（%）
- 如果不被extend引用，它是不会被编译，也就是：不会占用css文件大小。这是和继承最大区别。
🍎🍎🍎🍌定义被继承的样式占位符 %
- SCSS
%btn {
border: 1px solid blue;
}
// 没有被extend
// 不会出现在css文件中
%test-btn {
border: 1px solid black;
}
.btn--primary {
color: black;
@extend %btn; //继承样式
}
.btn--info {
color: gray;
@extend %btn; //继承样式
}
- CSS
.btn--primary, .btn--info {
border: 1px solid blue;
}
.btn--primary {
color: black;
}
.btn--info {
color: gray;
}
🍑测试
- SCSS
.h-150 {
height: 150px;
}
%w-150 {
width: 150px;
}
.border {
background: #000;
@extend .h-150, %w-150;
}
- CSS
.h-150, .border {
height: 150px;
}
.border {
width: 150px;
}
.border {
background: #000;
}
🍎🍎🍎🍌🍌继承+占位符
- SCSS
%border-style {
border: 1px solid blue;
}
.container {
@extend %border-style; //继承占位符
color: red;
}
.container1 {
//继承另一个选择器
@extend .container;
}
- CSS
.container, .container1 {
border: 1px solid blue;
}
.container, .container1 {
color: red;
}
