一篇文章搞定SCSS入门
开篇点题好吧,这篇文章涵盖scss常用的方法,scss转css的插件使用,scss自定义ElementUI的主题。有兴趣的请往下看噢!
1. BEM CSS命名法
全称是Block Element modifier
规则如下:
1.要有一个主要名字
2.所有类名都围绕主要名字进行扩展__
连接
3.不同状态用--
连接,形如类名--状态
举例如下:
这样命名可以防止类名冲突,但是太复杂,所以我们可以简化他,主类名和副类名的连接用-
状态直接拿出来写,如下
2. sass插件的使用
Live Sass Compiler
这个插件可以很好的将scss
的文件编译为css
安装完这个插件后,按ctrl
+<
,进入设置页面,设置sass转化为css的路径
找到liveSassCompile.settings.formats
,在savePath中设置你css安放的路径(相对于scss的路径)
然后开启编译,按ctrl+shift+p
,点击Live Sass Watch Sass
,便可以实时的将scss
文件编译为css
文件了
3.scss的基础规则
3.1 嵌套选择器
body{
background:red;
p{
color:#fff;
}
}
//编译为scss
body {
background: red;
}
body p {
color: #fff;
}
3.2 &符号
&
可以引用父级选择器,运用&
可以在嵌套内层给父级选择器加hover
和class
li{
background:#000;
a{
color:#ff7788
}
&::hover{
background:#fff;
}
&.active{
background:#ffff00;
}
}
//css
li {
background: #000;
}
li a {
color: #ff7788;
}
li::hover {
background: #fff;
}
li.active {
background: #ffff00;
}
3.3嵌套属性
比如字体有font-size,font-weight,font-family
等多个属性,但每个属性前面都有个font,那么我们可以用嵌套属性来简写
body{
font: {//注意font后面一定要接 `:`,不然会被认为是一个类名
size:16px;
weight:700;
family:'宋体'
}
}
//css
body {
font-size: 16px;
font-weight: 700;
font-family: '宋体';
}
3.4 支持单行注释
3.5 变量
$+变量名
:值
$color:"red";
a{
color:$color
}
//css
a {
color: "red";
}
变量是有作用域的,跟js的作用域差不多,就近原则,可以使用!global强行变为全局变量
body{
a {
$red:'red' !global;
}
p{
//p标签中本来是不可能拿到a标签中定义的$red的
//但是因为加了!global,就变成全局作用域的变量了
//所以才能使用
color:$red;
}
}
//css
body p {
color: "red";
}
3.5 运算
-
SCSS可以进行加减乘除的运算
-
颜色相关的运算
p{
font-size:12px+10px;
height:(10/5)px;//注意除法要加个括号,外面写px不然会出错
width:5*5px;//乘法单位最后写,不能写两个带单位的数字相乘,即5px*5px是错误的
color:#000+#FFF;
}
//css
p {
font-size: 22px;
height: 2 px;
width: 25px;
color: white;
}
3.6 @mixin 混合
@mixin
可以将重复的代码提取出来,然后谁要用就@include
引入就好了
@mixin box{
background: #ffff00;
border:1px solid #ffff00;
color:blue;
}
.bigBox{
@include box;
height:200px;
width:200px;
}
.smallBox{
@include box;
height:50px;
width:50px
}
//css
.bigBox {
background: #ffff00;
border: 1px solid #ffff00;
color: blue;
height: 200px;
width: 200px;
}
.smallBox {
background: #ffff00;
border: 1px solid #ffff00;
color: blue;
height: 50px;
width: 50px;
}
看到上面,你会发现,虽然scss的代码变少了,但转化为css后,这些代码还是重复写了一次,那么我们可以看下一个方法继承
3.7 % 与 @extend
%box{
background: #ffff00;
border:1px solid #ffff00;
color:blue;
}
.bigBox{
@extend %box;
height:200px;
width:200px;
}
.smallBox{
@extend %box;
height:50px;
width:50px
}
//css
.bigBox, .smallBox {
background: #ffff00;
border: 1px solid #ffff00;
color: blue;
}
.bigBox {
height: 200px;
width: 200px;
}
.smallBox {
height: 50px;
width: 50px;
}
可以发现继承这个方法会将共同的css写在一起,减少了代码量
3.8 @function
在scss中我们可以自定义函数
这个方法主要是用来复用计算属性的,比如你需要将px转化为vw,可以这样写
@function pxToVw( $px){
@return $px/$PageWidth*100vw;
}
$PageWidth :320 ;//手机屏幕宽度
p{
width:pxToVw(300);
}
3.9 循环
$class:"for";
@for $i from 1 through 4{
.#{$class}-#{$i}{
height:40+$i+px
}
}
//注意
//#{变量}跟ES6的${}功能是一样的
//css
.for-1 {
height: 41px;
}
.for-2 {
height: 42px;
}
.for-3 {
height: 43px;
}
.for-4 {
height: 44px;
}
4. SCSS做响应式
@mixin phone{
@media (max-width:500px){
@content
}
}
//然后在你想用媒体查询的地方
p{
width:500px;
@include phone{
width:300px;//这里的代码将替换@content的区域
}
}
5. SCSS自定义ElementUI
这里将使用vue-ci来创建工程,没有下载vue-cli的可以去官网按教程下载
vue create hello-world
cd hello-world
npm run serve
然后我们要下载ElementUI
npm i -S element-ui
在main.js中引入
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
接着下载element的主题
npm i element-theme -g
再下载个白垩主题
npm i element-theme-chalk -D
输入et -i
会创建一个自定主题的文件
在你改好主题前,可以先用et --watch
自动监听和编译文件
此时会出现一个theme的文件夹,我们需要在main.js中导入theme中的index.css
//main.js
import 'element-ui/lib/theme-chalk/index.css'
//上面是原来的,现在改为
import '../theme/index.css'
好了,现在你改动的主题都会应用到你的组件中
结语
因为本人水平有限,如果有错漏的地方,还请看官多多指正
本文作者胡志武,写于2019/5/24,如果要转载,请注明出处,
如果觉得写的不错, 请点个赞吧