SASS 学习笔记 II
上篇笔记,SASS 学习笔记 中包含:
-
配置
-
变量
-
嵌套
这里加一个扩展,嵌套中有一个
&
的用法,使用&
可以指代当前 block 中的 selector,后面可以追加其他的选择器。如当前的 scope 是form
,可以在嵌套中使用&-selector
指代form-selector
,如:HTML 有:
<!-- Navbar --> <nav class="navbar"> <div class="navbar-navigation"> <div class="navbar-navigation-left"></div> <div class="navbar-navigation-right"></div> </div> </nav> <!-- End of Navbar -->
scss 写:
.navbar { &-navigation { &-left { } &-right { } } }
-
扩展
-
mixin
-
function
-
placeholder selector
-
import & partials
这部分就这剩下的一些特性/功能去学习一下,过了一遍剩下的内容,SCSS 也差不多学完了。
SCSS 高级特性
数据类型
-
数字
这个基本是数字单位,如 100px,100%,100,0.1 等
-
字符串
这个常用于字体类和 string interpolation,如
font-family: 'Arial'
,string interpolation 下面会说 -
颜色
hex、hsl、rgb 这种
-
布尔值
-
list
SCSS 中的 list 一般用逗号做分隔符,不过有些和 css 一致的可以用空格,如:
// 不用字符串 sass 会提示报错,node-sass好像没什么问题就是了 $colors: 'red', 'orange'; $box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-
map
用法如下:
$colors: ( primary: red, secondary: green, tertiary: blue, ); // 获取方式使用内置的 map-get html { background-color: map-get($colors, primary); }
我个人觉得 map 获取单一值的意义不大,不过搭配上变量+循环/if 进行配置之类的倒是很方便。
-
null
一般不存在的值 SCSS 默认就是 null,出现获取/使用 null 的时候,终端也会报错。
-
特殊
global, selector 和 function
interpolation
interpolation 就是一个将变量、表达式或选择器转换成一个字符串的方式,语法就是使用 #{}
,使用方法有:
$color: red;
body {
color: #{$color};
}
$selector: '.button';
#{$selector}: {
background-color: #{$color};
}
同样,这种搭配循环/if 很好用。
for 循环
语法为:@for $i from <start> through <end> {}
或 @for $i from <start> to <end> {}
,前者包含 end
,后者不包。
同样搭配上面介绍过的一些特性会比较好用,如:
$colors2: (
1: red,
2: green,
3: blue,
4: orange,
);
// @for $i from 1 to 4, 4 is exclude
@for $i from 1 through 4 {
.paragraph-#{$i} {
background-color: map-get($map: $colors2, $key: $i);
}
}
编译后的结果为:
.paragraph-1 {
background-color: red;
}
.paragraph-2 {
background-color: green;
}
.paragraph-3 {
background-color: blue;
}
.paragraph-4 {
background-color: orange;
}
each 循环
有点像 JS 的 for each
,如果只是想获取 list 中的值,用 @each
会方便一些,也可以不需要用 map-get
。
如上面的循环用 each 的写法为:
@each $i, $c in $colors2 {
.paragraph-#{$i} {
background-color: #{$c};
}
}
这里不使用解构的方法也可以用 nth()
实现,如:
@each $item in $colors2 {
.paragraph-#{nth($item, 1)} {
background-color: #{nth($item, 2)};
}
}
就是没这么方便。
if
也是 if/else-if/else 的用法,我觉得这种用在 media query 特别的方便。
案例
slideshow
这个主要还是用 animation 来实现的,不过使用 SCSS 的循环确实很方便,原生 CSS 定义 delay 的写法为:
.slideshow-slide:nth-child(1) {
animation-delay: 0s;
}
.slideshow-slide:nth-child(2) {
animation-delay: 4s;
}
.slideshow-slide:nth-child(3) {
animation-delay: 8s;
}
.slideshow-slide:nth-child(4) {
animation-delay: 12s;
}
.slideshow-slide:nth-child(5) {
animation-delay: 16s;
}
使用 SCSS 的写法:
$animList: 1 0s, 2 4s, 3 8s, 4 12s, 5 16s;
@each $item in $animList {
.slideshow-slide:nth-child(#{nth($item, 1)}) {
animation-delay: nth($item, 2);
}
}
或者
$animList: 1, 2, 3, 4, 5;
@each $item in $animList {
.slideshow-slide:nth-child(#{$item}) {
animation-delay: #{($item - 1) * 4}s;
}
}
同样的写法也可以搭配 nth-child
:
$socialMediaColors: 1 #3b5998, 2 #b31217, 3 #dc4e41, 4 #55acee, 5 #517fa4, 6
#0077b5;
@each $color in $socialMediaColors {
.social-icons-item:nth-child(#{nth($color, 1)}) .social-icons-link {
color: nth($color, 2);
border: 0.1rem solid nth($color, 2);
}
}
最终完成的效果:
文章来源:https://www.toymoban.com/news/detail-654617.html
media query
media query 主要依赖 mixin,用法如下:文章来源地址https://www.toymoban.com/news/detail-654617.html
@mixin response($breakpoint) {
@if ($breakpoint == xl) {
@media (max-width: 1200px) {
@content;
}
} @else if ($breakpoint == lg) {
@media (max-width: 1000px) {
@content;
}
} @else if ($breakpoint == md) {
@media (max-width: 760px) {
@content;
}
} @else if ($breakpoint == sm) {
@media (max-width: 560px) {
@content;
}
}
}
html {
font-size: 62.5%;
@include response(md) {
font-size: 56.25%;
}
@include response(sm) {
font-size: 50%;
}
}
到了这里,关于SASS 学习笔记 II的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!