360如何做免费的网站,公司申请邮箱怎么申请,做五金的网站,怎么用ps做网站首页字SASS 学习笔记 II
上篇笔记#xff0c;SASS 学习笔记 中包含#xff1a; 配置 变量 嵌套 这里加一个扩展#xff0c;嵌套中有一个 的用法#xff0c;使用 可以指代当前 block 中的 selector#xff0c;后面可以追加其他的选择器。如当前的 scope 是 formSASS 学习笔记 中包含 配置 变量 嵌套 这里加一个扩展嵌套中有一个 的用法使用 可以指代当前 block 中的 selector后面可以追加其他的选择器。如当前的 scope 是 form可以在嵌套中使用 -selector 指代 form-selector如 HTML 有 !-- Navbar --
nav classnavbardiv classnavbar-navigationdiv classnavbar-navigation-left/divdiv classnavbar-navigation-right/div/div
/nav
!-- End of Navbar --scss 写 .navbar {-navigation {-left {}-right {}}
}扩展 mixin function placeholder selector import partials
这部分就这剩下的一些特性/功能去学习一下过了一遍剩下的内容SCSS 也差不多学完了。
SCSS 高级特性
数据类型 数字 这个基本是数字单位如 100px100%1000.1 等 字符串 这个常用于字体类和 string interpolation如 font-family: Arialstring 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);}
}最终完成的效果 media query
media query 主要依赖 mixin用法如下
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%;}
}
