关键词:
Sass又名SCSS,是CSS预处理器之一,,它能用来清晰地、结构化地描述文件样式,有着比普通 CSS 更加强大的功能。 Sass 能够提供更简洁、更优雅的语法,同时提供多种功能来创建可维护和管理的样式表。以下是我的学习笔记。
Sass安装环境
1.安装sass(mac)
①:Ruby安装
②:安装sass
sudo gem install sass
可以通过 sass -v检测是否完成安装
2.更新sass
gem update sass
3.卸载(删除)sass
gem uninstall sass
Sass编译调试
我们现在一般采用scss语法格式。SCSS 是 Sass 的新语法格式,从外形上来判断他和 CSS 长得几乎是一模一样,代码都包裹在一对大括号里,并且末尾结束处都有一个分号。其文件名格式以“.scss”为扩展名。注意文件扩展名不能用.sass。
使用 Sass 进行开发,项目中还是引用“.css”文件.Sass 只不过是做为一个预处理工具,提前帮你做事情,只有你需要时候,它才有攻效。 Sass 开发之后,要让 Web 页面能调用 Sass 写好的东西,就得有一个编译过程。
编译方式
1.命令编译:命令编译是指使用你电脑中的命令终端,通过输入 Sass 指令来编译 Sass。这种编译方式是最直接也是最简单的一种方式。
①单文件编译:(开启“watch”功能,这样只要你的代码进行任保修改,都能自动监测到代码的变化,并且给你直接编译出来:)
sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css (style是文件的名字)
②多文件编译:(对整个项目所有 Sass 文件编译成 CSS 文件,并且将这些 CSS 文件都放在项目中“css”文件夹中)
sass --watch sass/:css/
2.GUI界面工具编译
- Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html)
- CodeKit (http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)
3.自动化编译
以下分别通过Grunt和Gulp来配置Sass的编译
①:Grunt 配置 Sass 编译的示例代码
module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), sass: { dist: { files: { 'style/style.css' : 'sass/style.scss' } } }, watch: { css: { files: '**/*.scss', tasks: ['sass'] } } }); grunt.loadNpmTasks('grunt-contrib-sass'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.registerTask('default',['watch']); }
②:Gulp 配置 Sass 编译的示例代码
var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function () { gulp.src('./scss/*.scss') .pipe(sass()) .pipe(gulp.dest('./css')); }); gulp.task('watch', function() { gulp.watch('scss/*.scss', ['sass']); }); gulp.task('default', ['sass','watch']);
编译错误:
在Sass的编译的过程中,是不是支持“GBK”编码的。所以在创建 Sass 文件时,就需要将文件编码设置为“utf-8”,在项目中文件命名或者文件目录命名不要使用中文字符。
不同样式风格的输出方法
1、嵌套输出方式 nested,在编译的时候带上参数“ --style nested”:
sass --watch test.scss:test.css --style nested
2、展开输出方式 expanded,在编译的时候带上参数“ --style expanded”:
sass --watch test.scss:test.css --style expanded
3、紧凑输出方式 compact,在编译的时候带上参数“ --style compact”:
sass --watch test.scss:test.css --style compact
4.压缩输出方式 compressed,在编译的时候带上参数“ --style compressed”:
sass --watch test.scss:test.css --style compressed
一段时间之后,你实际上就不再需要写 CSS 代码了,只用写 Sass 代码。在这种情况下,你只需要设定输出格式为压缩格式,知道输出的 CSS 代码可以直接使用即可。
Sass的调试
这张图表示的是,在chrome浏览器上改动相应的scss的样式,效果会实时同步出来,并且改动的代码会保存到本地。实现的方法可以看这个教程。
现在实现并不是一件难事,只要你的浏览器支持“sourcemap”功能即可。早一点的版本,需要在编译的时候添加“--sourcemap” 参数:
sass --watch --scss --sourcemap style.scss:style.css
在 Sass3.3 版本之上,不需要添加这个参数也可以:
sass --watch style.scss:style.css
Sass的基本特性-基础
变量
声明变量
定义之后可以在全局范围内使用。 $fontSize: 12px; body{ font-size:$fontSize; } 编译后的css代码: body{ font-size:12px; }
$baseLineHeight:1.5 !default; body{ line-height: $baseLineHeight; } 编译后的css代码: body{ line-height:1.5; }
//SCSS $color: orange !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量) .block { color: $color;//调用全局变量 } em { $color: red;//定义局部变量 a { color: $color;//调用局部变量 } } span { color: $color;//调用全局变量 }
嵌套
应该少用。
1、选择器嵌套
假设我们有一段这样的结构: <header> <nav> <a href=“##”>Home</a> <a href=“##”>About</a> <a href=“##”>Blog</a> </nav> <header> 想选中 header 中的 a 标签,在写 CSS 会这样写: nav a { color:red; } header nav a { color:green; } 那么在 Sass 中,就可以使用选择器的嵌套来实现: nav { a { color: red; header & { color:green; } } }
2、属性嵌套
Sass 中还提供属性嵌套,CSS 有一些属性前缀相同,只是后缀不一样,比如:border-top/border-right,与这个类似的还有 margin、padding、font 等属性。假设你的样式中用到了: .box { border-top: 1px solid red; border-bottom: 1px solid green; } 在 Sass 中我们可以这样写: .box { border: { top: 1px solid red; bottom: 1px solid green; } }
3、伪类嵌套:伪类嵌套和属性嵌套非常类似,只不过它需要借助`&`符号一起配合使用
我们就拿经典的“clearfix”为例吧: .clearfix{ &:before, &:after { content:""; display: table; } &:after { clear:both; overflow: hidden; } } 编译出来的 CSS: clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; overflow: hidden; }
混合宏
在 Sass 中,使用“@mixin”来声明一个混合宏
不带参数混合宏: @mixin border-radius{ -webkit-border-radius: 5px; border-radius: 5px; } 大括号里面是复用的样式代码。 带参数混合宏: @mixin border-radius($radius:5px){ -webkit-border-radius: $radius; border-radius: $radius; }
使用“@include”来调用一个混合宏
@mixin border-radius{ -webkit-border-radius: 3px; border-radius: 3px; } --------调用--------- button { @include border-radius; } 这个时候编译出来的 CSS: button { -webkit-border-radius: 3px; border-radius: 3px; }
混合宏的参数--传一个不带值的参数
在混合宏中,可以传一个不带任何值的参数,比如: @mixin border-radius($radius){ -webkit-border-radius: $radius; border-radius: $radius; } 在混合宏“border-radius”中定义了一个不带任何值的参数“$radius”。 在调用的时候可以给这个混合宏传一个参数值: .box { @include border-radius(3px); } 编译出来的 CSS: .box { -webkit-border-radius: 3px; border-radius: 3px; }
混合宏的参数--传一个带值的参数
在 Sass 的混合宏中,还可以给混合宏的参数传一个默认值,例如: @mixin border-radius($radius:3px){ -webkit-border-radius: $radius; border-radius: $radius; } 在调用类似这样的混合宏时,会多有一个机会,假设你的页面中的圆角很多地方都是“3px”的圆角,那么这个时候只需要调用默认的混合宏“border-radius”: .btn { @include border-radius; } 编译出来的 CSS: .btn { -webkit-border-radius: 3px; border-radius: 3px; }
混合宏的参数--传多个参数
Sass 混合宏除了能传一个参数之外,还可以传多个参数,如: @mixin center($width,$height){ width: $width; height: $height; position: absolute; top: 50%; left: 50%; margin-top: -($height) / 2; margin-left: -($width) / 2; } .box-center { @include center(500px,300px); } 编译出来 CSS: .box-center { width: 500px; height: 300px; position: absolute; top: 50%; left: 50%; margin-top: -150px; margin-left: -250px; }
扩展/继承
在 Sass 中是通过关键词 “@extend”来继承已存在的类样式块,从而实现代码的继承。
//SCSS .btn { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; } .btn-primary { background-color: #f36; color: #fff; @extend .btn; } .btn-second { background-color: orange; color: #fff; @extend .btn; } 编译出来之后: //CSS .btn, .btn-primary, .btn-second { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; } .btn-primary { background-color: #f36; color: #fff; } .btn-second { background-clor: orange; color: #fff; }
占位符 %:通过 @extend 调用的占位符才会产生效果,编译出来的代码会将相同的代码合并在一起。
%placeholder 声明的代码,如果不被 @extend 调用的话,不会产生任何代码。 //SCSS %mt5 { margin-top: 5px; } %pt5{ padding-top: 5px; } .btn { @extend %mt5; @extend %pt5; } .block { @extend %mt5; span { @extend %pt5; } } 编译出来的CSS //CSS .btn, .block { margin-top: 5px; } .btn, .block span { padding-top: 5px; } 从编译出来的 CSS 代码可以看出,通过 @extend 调用的占位符,编译出来的代码会将相同的代码合并在一起。这也是我们希望看到的效果,也让你的代码变得更为干净。
混合宏 VS 继承 VS 占位符
他们各有各的优点与缺点,先来看看他们使用效果:
a) Sass 中的混合宏使用 @mixin mt($var){ margin-top: $var; } .block { @include mt(5px); span { display:block; @include mt(5px); } } .header { color: orange; @include mt(5px); span{ display:block; @include mt(5px); } } ---编译出来的结果--- .block { margin-top: 5px; } .block span { display: block; margin-top: 5px; } .header { color: orange; margin-top: 5px; } .header span { display: block; margin-top: 5px; } 总结:编译出来的 CSS 清晰告诉了大家,他不会自动合并相同的样式代码,如果在样式文件中调用同一个混合宏,会产生多个对应的样式代码,造成代码的冗余,这也是 CSSer 无法忍受的一件事情。不过他并不是一无事处,他可以传参数。 个人建议:如果你的代码块中涉及到变量,建议使用混合宏来创建相同的代码块。
.mt{ margin-top: 5px; } .block { @extend .mt; span { display:block; @extend .mt; } } .header { color: orange; @extend .mt; span{ display:block; @extend .mt; } } ----编辑以后---- .mt, .block, .block span, .header, .header span { margin-top: 5px; } .block span { display: block; } .header { color: orange; } .header span { display: block; } 总结:使用继承后,编译出来的 CSS 会将使用继承的代码块合并到一起,通过组合选择器的方式向大家展现,比如 .mt, .block, .block span, .header, .header span。这样编译出来的代码相对于混合宏来说要干净的多,也是 CSSer 期望看到。但是他不能传变量参数。 个人建议:如果你的代码块不需要专任何变量参数,而且有一个基类已在文件中存在,那么建议使用 Sass 的继承。
%mt{ margin-top: 5px; } .block { @extend %mt; span { display:block; @extend %mt; } } .header { color: orange; @extend %mt; span{ display:block; @extend %mt; } } -----编译以后------- .block, .block span, .header, .header span { margin-top: 5px; } .block span { display: block; } .header { color: orange; } .header span { display: block; } 总结:编译出来的 CSS 代码和使用继承基本上是相同,只是不会在代码中生成占位符 mt 的选择器。那么占位符和继承的主要区别的,“占位符是独立定义,不调用的时候是不会在 CSS 中产生任何代码;继承是首先有一个基类存在,不管调用与不调用,基类的样式都将会出现在编译出来的 CSS 代码中。”
注释
1、类似 CSS 的注释方式,使用 ”/* ”开头,结属使用 ”*/ ” 2、类似 JavaScript 的注释方式,使用“//” 两者区别,前者会在编译出来的 CSS 显示,后者在编译出来的 CSS 中不会显示,来看一个示例: //定义一个占位符 %mt5 { margin-top: 5px; } /*调用一个占位符*/ .box { @extend %mt5; } 编译出来的CSS .box { margin-top: 5px; } /*调用一个占位符*/
Sass的基本特性-运算
加法运算是 Sass 中运算中的一种,在变量或属性中都可以做加法运算。如: .box { width: 20px + 8in; } 编译出来的 CSS: .box { width: 788px; } 但对于携带不同类型的单位时,在 Sass 中计算会报错,如下例所示: .box { width: 20px + 1em; } 编译的时候,编译器会报错:“Incompatible units: 'em' and ‘px'.” 总结:in mm cm pt pc px等绝对单位都能运算; ex em rem等相对当前字体的都不能运算 能换算的都会换算成px像素长度 不能换算的都会报编译错误 有个例外就是不加单位的话就相当于0
Sass 的减法运算和加法运算类似,我们通过一个简单的示例来做阐述: $full-width: 960px; $sidebar-width: 200px; .content { width: $full-width - $sidebar-width; } 编译出来的 CSS 如下: .content { width: 760px; }
Sass 中的乘法运算和前面介绍的加法与减法运算还略有不同。虽然他也能够支持多种单位(比如 em ,px , %),但当一个单位同时声明两个值时会有问题。比如下面的示例: .box { width:10px * 2px; } 编译的时候报“20px*px isn't a valid CSS value.”错误信息。 如果进行乘法运算时,两个值单位相同时,只需要为一个数值提供单位即可。上面的示例可以修改成: .box { width: 10px * 2; } 编译出来的 CSS: .box { width: 20px; }
”/ ”符号被当作除法运算符时有以下几种情况: • 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。 • 如果数值被圆括号包围。 • 如果数值是另一个数学表达式的一部分。 如下所示: //SCSS p { font: 10px/8px; // 纯 CSS,不是除法运算 $width: 1000px; width: $width/2; // 使用了变量,是除法运算 width: round(1.5)/2; // 使用了函数,是除法运算 height: (500px/2); // 使用了圆括号,是除法运算 margin-left: 5px + 8px/2px; // 使用了加(+)号,是除法运算 } 编译出来的CSS p { font: 10px/8px; width: 500px; height: 250px; margin-left: 9px; } 在除法运算时,如果两个值带有相同的单位值时,除法运算之后会得到一个不带单位的数值。如下所示: .box { width: (1000px / 100px); } 编译出来的CSS如下: .box { width: 10; }
sass学习笔记(代码片段)
参考《Sass入门篇》《侧栏工具条开发》强烈推荐后者,良心课程。 Sass和SCSS其实是同一种东西,我们平时都称之为Sass,两者之间不同之处有以下两点:文件扩展名不同,Sass是以“.sass”后缀为扩展名,而SCSS是以“.... 查看详情
sass入门之sass安装
...终在一个sass群里找到了...发在这里纯属作为自己的一个学习笔记。侵立删原创是这个....下面是看完后的实践过程。真的能够用。!!sass依赖于ruby环境。所以先下载ruby1. 依照建议。选择第二项配置watermark/2/te 查看详情
sass快速入门学习笔记(代码片段)
1.使用变量;sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值定义成变量,然后通过变量名来引用它们,而无需重复书写这一属性值。或者,对于仅使用过一次的属性值,你可以赋予其一个易... 查看详情
es6从入门到精通系列学习笔记23篇(完结)
说明ES6从入门到精通系列(全23讲)学习笔记。可以自行搜索B站,有小马哥的视频学习。目录ES6从入门到精通#01:ES6介绍ES6从入门到精通#02:let和const命令ES6从入门到精通#03:模板字符串ES6从入门到精通#04&... 查看详情
pandas高级数据分析快速入门之五——机器学习特征工程篇(代码片段)
...—数据可视化篇Pandas高级数据分析快速入门之五——机器学习特征工程篇Pandas高级数据分析快速入门之六——机器学习预测分析篇0.Pandas高级数据分析使用机器学习概述需求解决方案技术方案 查看详情
pandas高级数据分析快速入门之五——机器学习特征工程篇(代码片段)
...—数据可视化篇Pandas高级数据分析快速入门之五——机器学习特征工程篇Pandas高级数据分析快速入门之六——机器学习预测分析篇0.Pandas高级数据分析使用机器学习概述需求解决方案技术方案 查看详情
pandas高级数据分析快速入门之六——机器学习预测分析篇(代码片段)
...—数据可视化篇Pandas高级数据分析快速入门之五——机器学习特征工程篇Pandas高级数据分析快速入门之六——机器学习预测分析篇0.训练集、测试集标注客户交易特征数据集[4],经 查看详情
学习笔记:javascript-入门篇
1.对话框,输出框,警告框 1.document.write() 可用于直接向HTML输出流写内容。简单的说就是直接在网页中输出内容。 2.alert(字符串或变量); 3.confirm消息对话框通常用于允许用户做选择的动作,如:“你对吗?”等。... 查看详情
lua学习笔记——风格
前一篇大概学习了lua常用的语法,都是些刚入门时应该了解的。见这里 Lua学习笔记(1)——语法这篇主要记录一些关于lua代码风格的经验,如果不了解它们,还是拿着函数式或传统面向对象的风格去写lua,就永远无法了... 查看详情
vue学习笔记入门篇——组件的使用
本文为转载,原文:Vue学习笔记入门篇——组件的使用组件定义组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js的编译器为它添加特殊功能。在有些情... 查看详情
qt快速入门学习笔记(基础篇)
本文基于Qter开源社区论坛版主yafeilinux编写的《Qt快速入门系列教程目录》,网址:http://bbs.qter.org/forum.php?mod=viewthread&tid=193。参考书为基于该系列教程《QtCreator快速入门》和《Qt及QtQuick开发实战精解》1、关联Qt库。如果是分别... 查看详情
b站学习笔记之初探jvm学习笔记(代码片段)
写在前面本次笔记整理学习来源–>B站传送门–>【狂神说Java】JVM快速入门篇感谢狂神❤这位up的短视频知识点教学也很棒–>B站up主较真的度[程序员5分钟]白话JVM内存结构,死也忘不了;[程序员5分钟]带你认识java中jvm虚... 查看详情
springboot系列之入门篇
前言前面我们学习了Java基础和算法,接下来我们通过学习SpringBoot基础来强化代码书写能力,只有通过基础项目实践才能发现问题,在此过程中我们则可以进一步学习JVM虚拟机和线程知识,岂不两全其美,好了,话不多讲,我们... 查看详情
学习笔记之爬虫篇
网络爬虫(又被称为网页蜘蛛,网络机器人,更经常的称为网页追逐者),是一种按照一定的规则,自动的抓取万维网信息的程序或者脚本。另外一些不常使用的名字还有蚂蚁,自动索引,模拟程序或者蠕虫。模块:scrapy req... 查看详情
vue学习笔记入门篇——组件的通讯
本文为转载,原文:Vue学习笔记入门篇——组件的通讯组件意味着协同工作,通常父子组件会是这样的关系:组件A在它的模版中使用了组件B。它们之间必然需要相互通信:父组件要给子组件传递数据,子组件需要将它内部发生... 查看详情
es6从入门到精通系列学习笔记23篇(完结)
说明ES6从入门到精通系列(全23讲)学习笔记。可以自行搜索B站,有小马哥的视频学习。目录ES6从入门到精通#01:ES6介绍ES6从入门到精通#02:let和const命令ES6从入门到精通#03:模板字符串ES6从入门到精通#04&... 查看详情
vue学习笔记入门篇——组件的内容分发(slot)
本文为转载,原文:Vue学习笔记入门篇——组件的内容分发(slot)介绍为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为内容分发(或“transclusion”如果你熟悉Angular)。Vue.js实现了一... 查看详情
pandas高级数据分析快速入门之二——基础篇(代码片段)
...表间数据处理篇Pandas高级数据分析快速入门之五——机器学习特征工程篇Pandas高级数据分析快速入门之六——机器学习预测分析篇0.Pandas构成Pandas由两种常用的数据类型: 查看详情