标签：轻易 Sass color 十分钟 CSS article 选择器 css

文章目录

• 官网
• 引言
• 什么是Sass?
• Sass的原理
• 安装
• 编译Sass
• VS Code中使用Sass
• 使用
• • 1.注释
  • 2.使用变量
  • 3.默认变量值
  • 4.CSS
  • • 4-1.嵌套CSS 规则
    • 4-2.群组选择器的嵌套
    • 4-3.子组合选择器和同层组合选择器：> +和~
    • 4-4.嵌套属性
  • 5.混合 @mixin @include
  • 6.继承 @extend
  • 7.引入 @import
  • 8.if判断
  • 9.循环
  • 10.函数 @function

官网

• Sass 中文官网: https://www.sass.hk/

引言

• CSS3之前的CSS都大都是枚举属性样式，而编程语言强大的变量、函数、循环、分支等功能基本都不能在CSS中使用，Sass就是一种增强CSS编程的扩展语言

什么是Sass?

• 世界上最成熟、最稳定、最强大的专业级CSS扩展语言
• Sass是一门高于CSS的语言,它能用来 清晰的、结构化地描述文件样式,有着比普通CSS更加强大的功能.
• 能够提供更简洁、更优雅的语法、同时提供多种功能来创建可维护和管理样式表
• 它是css预处理器
• 其它css预处理器: Sass(scss) 、 LESS 、 Stylus 、 DT CSS 、 Switch CSS 、 Turbine 、 Switch CSS 、 CSS Cacheer

Sass的原理

• Sass本质就是在CSS的语法的基础上增加了自定义的变量、循环、分支、函数、mixin、继承、运算等功能，让CSS编程变得异常强大。
• 当然浏览器是不认识Sass语法。开发人员写完了Sass的语法文件后需要通过工具转成原始的CSS代码。

安装

• Sass基于Ruby语言开发而成，因此安装sass前需要安装Rub https://rubyinstaller.org/downloads/
• 安装完成后需测试安装有没有成功,运行CMD输入以下命令：
  ruby -v (查看版本号)
  gem install sass (安装Sass)
  gem install compass (安装compass)

编译Sass

• 单文件转换命令: sass input.scss output.css
• 单文件监听命令: sass --watch input.scss:output.css
• 如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：sass --watch app/sass:public/stylesheets

VS Code中使用Sass

1. 现在 VS Code 商店中,搜索 easy sass,然后安装
2. 修改VS Code 的配置, 点击管理,找到文本编辑器,点击 在settings.json中编辑

"easysass.compileAfterSave": true,
  "easysass.formats": [ //nested：嵌套缩进的 css 代码。//expanded：没有缩进的、
  //扩展的css代码。//compact：简洁格式的 css 代码。//compressed：压缩后的 css 代码
        {
            "format": "expanded",
            "extension": ".css"
        },
        {
            "format": "compressed",
            "extension": ".min.css"
        }
    ],
    "easysass.targetDir": "./css" 
    //保存编译时的路径,会在你编译的这个文件当前下的 css 文件中转换 css 文件,需要手动添加这个css 文件夹

使用

1.注释

//       单行注释(静默注释)不会被编译到 css 文件里面
/* */    多行注释 会在 xxx.css 中编译,  min.css 则不会
/*! */   强制注释,在任何版本下都会被保留

2.使用变量

1. 定义变量用 “$” 符替代

$color:yellow;
$a123:green;
$top:top;

2. 特殊变量,比如和css属性混在一起,为了能解析变量,把这个变量用 #{} 包起来

<style>
	div{
		width:100px;
		height:200px;
		border-#{$top}:12px solid green;  // $top 在上面定义变量时定义的
	}
</style>

3. 全局变量

<style>
	p{
		$abc:80px;
	}
	
	div{
		font-size:$abc; // 无法使用
	}
	
	在花括符内定义的变量在其它或括符内访问不到,如果想成为全局变量,
	在定义这个变量的后面加上 !global
	
	p{
		$abc:80px !global;
	}
</style>

3.默认变量值

• 一般情况下，你反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值

$link-color:blue;
$link-color:red;

<style>
	a {
		color: $link-color; // red
	}
</style>

• 使用 !default 默认值

$bb:red !default;// 红色为默认值

<style>
	div {
		width:100px;
		height:100px;
		font-color:$bb; // red
		$bb:blue; // 此时,就把默认颜色改为 蓝色了
		font-color:$bb; // blue
	}
</style>

4.CSS

4-1.嵌套CSS 规则

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

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

• 现在选择器嵌套

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

• 特殊hover

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

4-2.群组选择器的嵌套

<style>
	.container {
  		h1, h2, h3 {margin-bottom: .8em}
	}
	
	.container h1, .container h2, .container h3 { 
		margin-bottom: .8em 
	}
	
	nav, aside {
  		a {
  			color: blue
  		}
	}

	nav a, aside a {
		color: blue
	}
</style>

4-3.子组合选择器和同层组合选择器：> +和~

article section { margin: 5px }  // 会选择article下的所有命中section选择器的元素

article > section { border: 1px solid #ccc } // 只会选择article下紧跟着的子元素中命中section选择器的元素。

header + p { font-size: 1.1em } // header元素后紧跟的p元素

article ~ article { border-top: 1px dashed #ccc } // 选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素

4-4.嵌套属性

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

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

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

5.混合 @mixin @include

• @mixin 自定义一个名字 {代码块}
• @include 接收@mixin定义的名字 (引用代码)

@mixin border{
	border:1px solid red;
}

#div{
	@include border;  // 在 #div 就可以使用了 @mixin 定义的代码
}

6.继承 @extend

.btn{
	width:100px;
}

.dd{
	@extend .btn;  // 继承了.tbn 里面的属性  width:100px;
	height:50px;
}

7.引入 @import

假如现在这是 a.scss 文件,我们在里面编辑以下代码:
// a.scss
@charset="utf-8";
*{
	padding:0px;
	margin:0px;
}



假如现在在b.scss文件中,我们可以引入 a.scss文件
// b.scss
@import "a.scss"

8.if判断

• 在 if 前加上@符,省略或括符,直接判断

$a = red;

.box{
	@if $a == red{

	}@else if $a ==blue{
		
	}@else{

	}
}

9.循环

1. @for循环 (through包含结束位置 , to不包含结束位置)

$count: 12;
//包含结束位置
@for $i from 1 through $count{
    li:nth-child(#{$i}){
        width: 100px / 12 * $i;
    }
    // $i = 1,2,3,4,5,6,7,8,9,10,11,12
}


//不包含结束位置
@for $i from 1 to $count{
    li:nth-child(#{$i}){
        width: 100px / 12 * $i;
    }
    // $i = 1,2,3,4,5,6,7,8,9,10,11
}

2. @each

$icons: success warning error primary info;
@each $icon in $icons{
    #box li:nth-child(#{$icon}){
        background: url(images/#{$icon}.png) no-repeat;
    }
}

3. @while

$i : 6;
@while $i > 0 {
    li:nth-child(#{$i}){
        font-size: #{$i*16}px;
    }
     $i : $i - 1;
}

10.函数 @function

$colors:(red:red,light:white,dark:black);
@function color($key){
	@if not map-has-key($colors,$key){

		@warn "警告，gulp不会终端"
		@error "会终止监听"
	}
	@return map-get($colors,$key);
}

//函数调用
body{
	background-color:color(red);
}

标签：轻易,Sass,color,十分钟,CSS,article,选择器,css
来源： https://blog.csdn.net/L_u_c_k_y_m_a_n/article/details/117319220

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