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;
}
posted @ 2022-07-16 15:51  天使阿丽塔  阅读(46)  评论(0)  编辑  收藏  举报