vue脚手架中配置Sass的方法


Posted in Javascript onJanuary 04, 2018

世界上最成熟、最稳定、最强大的专业级CSS扩展语言!

兼容CSS
Sass完全兼容所有版本的CSS。我们对此严格把控,所以你可以无缝地使用任何可用的CSS库。

特性丰富
Sass拥有比其他任何CSS扩展语言更多的功能和特性。Sass核心团队不懈努力,一直使其保持领先地位。

成熟
Sass已经经过其核心团队超过8年的精心打造。

行业认可
一次又一次地,行业把Sass作为首选CSS扩展语言。

社区庞大
数家科技企业和成百上千名开发者为Sass提供支持。

框架
有无数的框架使用Sass构建。比如Compass,Bourbon,和Susy。

我是在vue脚手架中安装的

1 安装

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass

2 配置: 在build文件夹下的webpack.base.conf.js的rules里面添加配置

{
 test: /\.sass$/,
 loaders: ['style', 'css', 'sass']
}
// 不知道为什么我配置完就打包不了, 不配置就是好用的

3 在APP.vue中修改style标签

<style lang="scss">

4 使用

(1) 变量

1-1) 使用变量

sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值 定义成变量,然后通过变量名来引用它们,而无需重复书写这一属性值。或者,对于仅使用过一 次的属性值,你可以赋予其一个易懂的变量名,让人一眼就知道这个属性值的用途。

sass使用$符号来标识变量(老版本的sass使用!来标识变量。改成$是多半因为!highlight-color看起来太丑了。)

1-2) 变量声明

$back: red
#app
 color: $back
// 变量声明也分为全局变量和局部变量 

// 这样也是好用的

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
 border: $highlight-border;
}

//编译后

.selected {
 border: 1px solid #F90;
}

1-3) 变量命名

在sass中使用-和_其实是一样的 例如$link-color和$link_color其实指向的是同一个变量。

$link-color: blue;
a {
 color: $link_color;
}

//编译后
a {
 color: blue;
}

(2) 嵌套css规则

css中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时,往往需要 一遍又一遍地写同一个ID:

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

像这种情况,sass可以让你只写一遍,且使样式可读性更高。在Sass中,你可以像俄罗斯套娃那样在规则块中嵌套规则块。sass在输出css时会帮你把这些嵌套规则处理好,避免你的重复书写。

#content {
 article {
 h1 { color: #333 }
 p { margin-bottom: 1.4em }
 }
 aside { background-color: #EEE }
}

 /* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

(2-1) 父选择器的标识符&;

使用后代选择器和为了伪类的时候可能就是比较麻烦了 不知道怎么写。这个时候&就派上用场了

article a {
 color: blue;
 &:hover { color: red }
}

// 编译后

// 其实&相当于是父级
article a { color: blue }
article a:hover { color: red }

(2-2) 群组选择器的嵌套;

在处理群组的时候只需要用,分割就好了,就能完美的解析不用内么麻烦

.container {
 h1, h2, h3 {margin-bottom: .8em}
}

<!--编译后-->

.container h1 {margin-bottom: .8em}
.container h2 {margin-bottom: .8em}
.container h3 {margin-bottom: .8em}

这种也是一样的

nav, aside {
 a {color: blue}
}
//编译后
nav a, aside a {color: blue}

(2-3) 子组合选择器和同层组合选择器:>、+和~;

上边这三个组合选择器必须和其他选择器配合使用,以指定浏览器仅选择某种特定上下文中的元素。

article {
 // 同层全体组合选择器
 ~ article { border-top: 1px dashed #ccc }
 // 直接子元素
 > section { background: #eee }
 dl > {
 dt { color: #333 }
 dd { color: #555 }
 }
 // 同层相邻组合选择器
 nav + & { margin-top: 0 }
}

(2-4) 嵌套属性;

在sass中,除了CSS选择器,属性也可以进行嵌套。尽管编写属性涉及的重复不像编写选择器那么糟糕,但是要反复写border-styleborder-widthborder-color以及border-*等也是非常烦人的。在sass中,你只需敲写一遍border:

nav {
 border: {
 style: solid;
 width: 1px;
 color: #ccc;
 }
}

// 编译后
nav {
 border-style: solid;
 border-width: 1px;
 border-color: #ccc;
}

你甚至还可以这样写

nav {
 border: 1px solid #ccc {
 left: 0px;
 right: 0px;
 }
}

// 编译后
nav {
 border: 1px solid #ccc;
 border-left: 0px;
 border-right: 0px;
}

3 导入SASS文件;

css有一个特别不常用的特性,即@import规则,它允许在一个css文件中导入其他css文件。然而,后果是只有执行到@import时,浏览器才会去下载其他css文件,这导致页面加载起来特别慢。

sass也有一个@import规则,但不同的是,sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中,而无需发起额外的下载请求。

4 默认变量值

一般情况下,你反复声明一个变量,只有最后一处声明有效且它会覆盖前边的值。举例说明:

$link-color: blue;
$link-color: red;
a {
color: $link-color; // red
}

但是你不想这种情况你可以使用sass的!default标签可以实现这个目的。它很像css属性中!important标签的对立面,不同的是!default用于变量,含义是:如果这个变量被声明赋值了,那就用它声明的值,否则就用这个默认值。

5 注释

body {
 color: #333; // 这种注释内容不会出现在生成的css文件中
 padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

6 混合器

如果你的整个网站中有几处小小的样式类似(例如一致的颜色和字体),那么使用变量来统一处理这种情况是非常不错的选择。但是当你的样式变得越来越复杂,你需要大段大段的重用样式的代码,独立的变量就没办法应付这种情况了。你可以通过sass的混合器实现大段样式的重用。

混合器使用@mixin标识符定义。看上去很像其他的CSS @标识符,比如说@media或者@font-face。这个标识符给一大段样式赋予一个名字,这样你就可以轻易地通过引用这个名字重用这段样式。下边的这段sass代码,定义了一个非常简单的混合器,目的是添加跨浏览器的圆角边框。

@mixin rounded-corners {
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
}

然后就可以在你的样式表中通过@include来使用这个混合器,放在你希望的任何地方。@include调用会把混合器中的所有样式提取出来放在@include被调用的地方。如果像下边这样写:

notice {
 background-color: green;
 border: 2px solid #00aa00;
 @include rounded-corners;
}

//sass最终生成:
// 编译后
.notice {
 background-color: green;
 border: 2px solid #00aa00;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
}

混合器太好用了,一不小心你可能会过度使用。大量的重用可能会导致生成的样式表过大,导致加载缓慢。所以,首先我们将讨论混合器的使用场景,避免滥用。

(6-1)给混合器传参;

混合器并不一定总得生成相同的样式。可以通过在@include混合器时给混合器传参,来定制混合器生成的精确样式。当@include混合器时,参数其实就是可以赋值给css属性值的变量。如果你写过JavaScript,这种方式跟JavaScript的function很像:

@mixin link-colors($normal, $hover, $visited) {
 color: $normal;
 &:hover { color: $hover; }
 &:visited { color: $visited; }
}

当混合器被@include时,你可以把它当作一个css函数来传参。如果你像下边这样写:

a {
 @include link-colors(blue, red, green);
}

//Sass最终生成的是:
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

其实@mixin 的方法还有很多 可以官网查看

7 使用选择器继承来精简CSS;

使用sass的时候,最后一个减少重复的主要特性就是选择器继承。基于Nicole Sullivan面向对象的css的理念,选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现,如下代码:

//通过选择器继承继承样式
.error {
 border: 1px solid red;
 background-color: #fdd;
}
.seriousError {
 @extend .error;
 border-width: 3px;
}

.seriousError不仅会继承.error自身的所有样式,任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承,如下代码:

//.seriousError从.error继承样式
.error a{ //应用到.seriousError a
 color: red;
 font-weight: 100;
}
h1.error { //应用到hl.seriousError
 font-size: 1.2rem;
}

关于@extend有两个要点你应该知道。

跟混合器相比,继承生成的css代码相对更少。因为继承仅仅是重复选择器,而不会重复属性,所以使用继承往往比混合器生成的css体积更小。如果你非常关心你站点的速度,请牢记这一点。
继承遵从css层叠的规则。当两个不同的css规则应用到同一个html元素上时,并且这两个不同的css规则对同一属性的修饰存在不同的值,css层叠规则会决定应用哪个样式。相当直观:通常权重更高的选择器胜出,如果权重相同,定义在后边的规则胜出。

混合器本身不会引起css层叠的问题,因为混合器把样式直接放到了css规则中,而继承存在样式层叠的问题。被继承的样式会保持原有定义位置和选择器权重不变。通常来说这并不会引起什么问题,但是知道这点总没有坏处。

以上就是我在官网所了解到的信息, 不算全面, 但是觉得在日常开发肯定够用了. 附上官网地址:Sass官网地址,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery垂直公告滚动实现代码
Dec 08 Javascript
javascript中String对象的slice()方法分析
Dec 20 Javascript
javascript中DOM复选框选择用法实例
May 14 Javascript
jQuery实现的网格线绘制方法
Jun 20 Javascript
浅析Ajax语法
Dec 05 Javascript
关于vue.js过渡css类名的理解(推荐)
Apr 10 Javascript
react-native 完整实现登录功能的示例代码
Sep 11 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
Sep 21 Javascript
javascript+css3开发打气球小游戏完整代码
Nov 28 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
Vue CLI 3搭建vue+vuex最全分析(推荐)
Sep 27 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
Angular4学习教程之HTML属性绑定的方法
Jan 04 #Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 #Javascript
JS计算输出100元钱买100只鸡问题的解决方法
Jan 04 #Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 #Javascript
JS实现简易换图时钟功能分析
Jan 04 #Javascript
Angular4学习之Angular CLI的安装与使用教程
Jan 04 #Javascript
利用Vue2.x开发实现JSON树的方法
Jan 04 #Javascript
You might like
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
两个开源的Php输出Excel文件类
2010/02/08 PHP
php实现简单洗牌算法
2013/06/18 PHP
Memcached常用命令以及使用说明详解
2013/06/27 PHP
解析php做推送服务端实现ios消息推送
2013/07/01 PHP
PHP树-不需要递归的实现方法
2016/06/21 PHP
JSON无限折叠菜单编写实例
2013/12/16 Javascript
Array栈方法和队列方法的特点说明
2014/01/24 Javascript
nodejs文件操作模块FS(File System)常用函数简明总结
2014/06/05 NodeJs
全面详细的jQuery常见开发技巧手册
2016/02/21 Javascript
基于JavaScript实现随机颜色输入框
2016/12/10 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
微信小程序之swiper滑动面板用法示例
2018/12/04 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
2019/02/22 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
2019/05/16 Javascript
了解前端理论:rscss和rsjs
2019/05/23 Javascript
在NodeJs中使用node-schedule增加定时器任务的方法
2020/06/08 NodeJs
关于JavaScript数组去重的一些理解汇总
2020/09/10 Javascript
Python logging模块学习笔记
2014/05/24 Python
python入门教程之识别验证码
2017/03/04 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
对python特殊函数 __call__()的使用详解
2019/07/02 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
python滑块验证码的破解实现
2019/11/10 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
css3 自定义字体font-face使用介绍
2014/05/14 HTML / CSS
Vans奥地利官方网站:美国原创极限运动潮牌
2018/09/30 全球购物
俄罗斯GamePark游戏商店网站:购买游戏、游戏机和配件
2020/03/13 全球购物
深圳茁壮笔试题
2015/05/28 面试题
主治医师岗位职责
2013/12/10 职场文书
离婚协议书怎样才有法律效力
2014/10/10 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
母亲节主题班会
2015/08/14 职场文书
总结Python使用过程中的bug
2021/06/18 Python
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL