scss入门学习(一)

2020-02-03 16:04:45 阅读：292 来源： 互联网

标签：scss style 入门 sass color 学习 radius css 变量

sass的文件后缀名

sass是目前流行的css预处理语言。sass有两种后缀文件，一种是.sass,不允许使用大括号和分号；另一种是.SCSS，允许使用大括号和分号,类似于我们平时写css的语法习惯。其实sass最早出现在2007年，但却没有后来的LESS流行和易于接受，最主要的原因是sass严格的语法要求不太符合csser编写，sass为了改变这种现状，迎合大众，推出了更为宽松的SCSS这种类css写法。

sass文件的编译

sass扩展了css的写法，为css提供了变量，继承，宏等能够提高效率和增强维护性的新概念。是不是说我们直接就可以在html文件中引用.sass文件了么?答案是否定的，浏览器并不会认识sass语法形式，而只会解析.css文件资源，所以我们需要将sass编译成css。

主要有以下几种编译方式：

命令编译

单文件编译：

1	sass <要编译的sass文件路径>/style.scss:<要输出的css文件路径>/style.css

多文件编译：

1	sass sass/:css/

实时监听文件更改

1	sass --watch <要编译的sass文件路径>/style.scss:<要输出的css文件路径>/style.css

GUI界面工具编译

Koalo
CodeKit

自动化编译

自动化编译因你使用的工具的不同而不同。当前流行的有gulp，grunt，webpack等。

不同样式风格的css输出方法

嵌套输出方式(nested)

1	sass test.scss:test.css --style nested

展开输出方式(expanded)

1	sass test.scss:test.css --style expanded

紧凑输出方式(compact)

1	sass test.scss:test.css --style compact

压缩输出方式(compressed)

1	sass test.scss:test.css --style compressed

变量

声明变量

— 1.变量声明符号($)
— 2.变量名称
— 3.赋予变量的值

1	$width: 100px;

普通变量和默认变量

在普通变量后加上关键字!default即可声明默认变量.默认变量的价值再进行组件化开发的时候非常有用。

1	$width: 100px !default;

局部变量和全局变量

在选择器，函数，混合宏…外面声明的变量为全局变量。相应的在块内部声明的变量为局部变量。局部变量在块内会覆盖全局变量。

$color: orange !default; //全局变量
.a{	
	$color: red; // 全局变量
	color: $color;  // color: red< 大专栏  scss入门学习(一)br/>}
.b{
	color: $color;  // color: orange
}

变量的调用

$width: 100px !default;
.container{
	width: $width;
}

混合宏(mixin)

当你的网站中有几处样式类似，比如颜色，字体时用变量就可以统一处理了；但是当你有大段的样式需要复用时，变量就无法达到目的了。而混合宏就变得很有意义了。

声明混合宏

— 混合宏声明符号(@mixin)
— 混合宏名称
— (可重用的)代码片段

不带参数的混合宏

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

带参数的混合宏

@mixin border-radius($radius:5px){
	-webkit-border-radius: $radius;
	border-radius: $radius;
}

复杂的混合宏

@mixin box-shadow($shadow...){
	@if length($shadow)>=1{
		@include prefixer(box-shadow,$shadow)
	}
} @else{
	$shadow: 0 0 4px rgba(0,0,0,.3);
	@include prefixer(box-shadow, $shadow)
}

调用混合宏

— 混合宏调用的关键字@include
— 混合宏的名称

继承／扩展

当两个样式有高度可重用代码时，我们可以定义一个基类，将相似度高的代码提取出来，然后子类继承(extend)父类。

<!-- 定义一个基类 -->
.btn{
	border: 1px solid 
	padding: 6px 10px;
  	font-size: 14px;	
}
.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn; // 继承
}

.btn-second {
  background-color: orange;
  color: #fff;
  @extend .btn; // 继承
}

占位符%placeholder

当定义一个基类的时候，如果没有子类继承他(extend)，就会造成代码冗余。我们使用占位符声明的代码，如果不被@extend调用的话，将不会产生任何代码。

1
2
3

%mt5{
	margin-top: 5px; //如果没有子类继承，代码中不会显示
}

优先使用占位符；如果需要传参数，使用宏；没有参数，使用继承。

标签：scss,style,入门,sass,color,学习,radius,css,变量
来源： https://www.cnblogs.com/lijianming180/p/12256016.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9