为什么我们要使用模块化开发呢?
因为日常的开发模式 存在以下痛点。
全局污染:CSS 选择器的作用域是全局的,所以很容易引起选择器冲突;而为了避免全局冲突,又会导致类命名的复杂度上升
复用性低:CSS 缺少抽象的机制,选择器很容易出现重复,不利于维护和复用。
当然,对于这个问题,也有一些方案。 vue 框架已经帮我们实现了 css 模块化, 通过 style 标签的 scoped 指令定义作用域,通过编译为该作用域所有标签生成唯一的属性。
SASS(英文全称:Syntactically Awesome Stylesheets)Sass 诞生于 2007 年,使用Ruby 编写,是一种对css的一种扩展提升,增加了规则、变量、混入、选择器、继承等等特性。可以理解为用js的方式去书写,然后编译成css。
比如说,sass中可以把反复使用的css属性值定义成变量,然后通过变量名来引用它们,而无需重复书写这一属性值。
Sass 语法
$font-stack: Helvetica, sans-serif; //定义变量
$primary-color: #333; //定义变量
body{
font: 100% $font-stack;
color: $primary-color;
}
编译出来的 CSS
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
嵌套:
nav
ul
margin: 0
padding: 0
list-style: none
li
display: inline-block
a
display: block
padding: 6px 12px
text-decoration: none
编译出来的css
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
Sass 允许嵌套 CSS 选择器,嵌套方式 与 HTML 的视觉层次结构相同。
但是,过度嵌套的规则 将导致过度限定的 CSS,这些 CSS 可能很难维护,并且 通常被认为是不好的做法。
模型:
// _base.sass
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
// styles.sass
@use 'base'
.inverse
background-color: base.$primary-color
color: white
相当于:
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
.inverse {
background-color: #333;
color: white;
}
混合:
允许创建一组 CSS 声明,以便在整个站点中重复使用。提高复用性。
@mixin theme($theme: DarkGray)
background: $theme
box-shadow: 0 0 1px rgba($theme, .25)
color: #fff
.info
@include theme
.alert
@include theme($theme: DarkRed)
.success
@include theme($theme: DarkGreen)
相当于:
.info {
background: DarkGray;
box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
color: #fff;
}
.alert {
background: DarkRed;
box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
color: #fff;
}
.success {
background: DarkGreen;
box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
color: #fff;
}
扩展:
允许将一组 CSS 属性从一个选择器共享到另一个选择器。
/* This CSS will print because %message-shared is extended. */
%message-shared
border: 1px solid #ccc
padding: 10px
color: #333
// This CSS won't print because %equal-heights is never extended.
%equal-heights
display: flex
flex-wrap: wrap
.message
@extend %message-shared
.success
@extend %message-shared
border-color: green
.error
@extend %message-shared
border-color: red
.warning
@extend %message-shared
border-color: yellow
相当于:
/* This CSS will print because %message-shared is extended. */
.message, .success, .error, .warning {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}
基本的使用就是这样。谢谢大家,啊哈哈。欢迎交流学习!