前期准备
- Sass中文档：学习参考手册
- 软件安装：VScode，ruby，node.js， npm，yarn。
软件使用：
- 最开始使用及配置：
-
利用终端先创建一个文件夹，之后把文件夹拖入vscode
我创建的是SCSSDEMO1文件
TIM图片20190113143444.png
-
使用箭头所指图标，创建文件
TIM图片20190113143543.png
-
创建好两个文件，一个.html文件，一个.scss文件
TIM图片20190113143808.png
-
在.html文件中写!之后按tab键。
TIM图片20190113144032.png
- 在1.scss中写入类CSS样式，刚开始加载是没有效果的。
-
点击view-terminal进入终端
TIM图片20190113144222.png
- 利用
http-server . -c-1获取http协议，在浏览器上预览。
TIM图片20190113145320.png
- 要想样.scss文件中的样式生效，一定要先安装parcel，安装步骤
npm init -y-
npm i -D parcel
如果安装过程出错，百度错误处理方法
- Parcel 是 Web 应用打包工具，适用于经验不同的开发者。它利用多核处理提供了极快的速度，并且不需要任何配置。
- 之后利用命令行
npx parcel index.html就可以把.scss转换成css。
TIM图片20190113145219.png
- 利用这个命令行会得到http协议，利用网址预览就可以了。
TIM图片20190113150856.png
一定要先安装parcel，是http-server . -c-1中间有一个.和Gitbase的不一样。一定要在.html文件中引入.scss文件。 - html文件中引入scss文件
<link rel = "stylesheet" href = "./1.scss">
Sass特色：
- 完全兼容 CSS3
- 在 CSS 语言基础上添加了扩展功能，比如变量、嵌套 (nesting)、混合 (mixin)
- 对颜色和其它值进行操作的{Sass::Script::Functions 函数}
- 函数库控制指令之类的高级功能
- 良好的格式，可对输出格式进行定制
- 支持 Firebug
Scss和Sass的区别：
- Sass（ 英文全称：Syntactically Awesome Stylesheets）
Sass 是对 CSS 的扩展，让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能， 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好， 同时也让你能够快速开始小型项目， 特别是在搭配 Compass 样式库一同使用时。
优点：
- 兼容 CSS 语法：Sass 完全兼容各个版本的 CSS 语法，对语法兼容的把控严格，可以放心的使用任何现有的 CSS 库。
- 功能丰富：Sass 比其他 CSS 扩展语言具有更多的功能和特性。Sass 虽然一直被追赶，但从未被超越。
- 稳定成熟：Sass2007年发表，2016年成熟。
- 久经考验：多次实验证明，Sass 是业界的首选 CSS 扩展语言。
- 广泛的社区：数家企业和数百位开发者在为 Sass 提供支持。
- 前端框架的基石：无数前端框架由 Sass 构建：Compass、Bourbon 和 Susy 等。
- Scss（Sassy CSS）的介绍：
Scss 是 Sass 3 引入的新语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的SCSS 文件。另外，SCSS 还能识别大部分 CSS hacks（一些 CSS 小技巧）和特定于浏览器的语法。 - Sass的语法：
Sass 有两种语法：第一种被称为 SCSS (Sassy CSS)；第二种比较老的语法称为缩排语法（或者就称为 "Sass"）， 提供了一种更简洁的 CSS 书写方式。 - 使用：
Sass 有三种使用方式： 命令行工具、独立的 Ruby 模块，以及包含 Ruby on Rails 和 Merb 作为支持 Rack 的框架的插件。
- Sass不使用花括号，而是通过缩排的方式来表达选择符的嵌套层级，而且也不使用分号，而是用换行符来分隔属性。
#sidebar
width: 30%
background-color: #faa
- SCSS 需要使用分号和花括号而不是换行和缩进。
#sidebar {
width: 30%;
background-color: #faa;
}
- SCSS 对空白符号不敏感，所以以上代码也可以写成下面的形式：
#sidebar {width: 30%; background-color: #faa}
- 任一语法都可以导入另一种语法撰写的文件中。 只要使用
sass-convert命令行工具，就可以将一种语法转换为另一种语法：
# 将 Sass 转换为 SCSS
$ sass-convert style.sass style.scss
# 将 SCSS 转换为 Sass
$ sass-convert style.scss style.sass
sass-嵌套选择器:选择器里面在写选择器，和顺序无关
.nav {
border: 1px solid green;
> ul {
background: white;
>li {
border: 1px solid red;
}
}
}
sass-变量:便于修改，还可以使不同的变量是同一个值。
$grey: #666;
$gray: $grey;
.nav {
border: 1px solid $gray;
> ul {
background: white;
>li {
border: 1px solid $grey;
}
}
}
sass-mixin:设置@mixin debug(可以为空){} ----引用@include debug(){}
- 简单用法
$border-width: 1px;
@mixin debug {
border: 1px solid red;
background: $grey;//可以添加多个样式
}
.nav {
@include debug;
> ul {
background: white;
>li {
@include debug;
}
}
}
- 高级用法：mixin可以认为是一个函数，可以传递一个参数
@mixin debug($border-color) {
border: 1px solid $border-color;
background: $grey;
}
.nav {
@include debug(red);
> ul {
background: white;
>li {
@include debug(green);//传递的参数不同
}
}
}
- 还可以给一个默认值。比如说默认是红色
@mixin debug($border-color:red) {
border: 1px solid $border-color;
background: $grey;
}
.nav {
@include debug;//有传入的默认red。
> ul {
background: white;
>li {
@include debug(green);
}
}
}
%---placeholder：设置%box{}---引用@extend %box;
不拷贝样式，只是把选择器移到代码的前面
<div class="nav">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="demo"></div>
若果想让demo和nav有相同的样式，可以采用mixin方法，但是实际只是减少了手写代码，CSS解析时没有减少
@mixin box {
box-shadow: 0 0 3px black;
margin: 10px;
background: white;
border-radius: 10px;
}
.nav {
> ul {
background: white;
border: $grey;
>li {
@include box;
}
}
}
.demo{
width: 100px;
height: 100px;
@include box;
}
TIM图片20190112210634.png
所以可以采用以下方法：
%box {
box-shadow: 0 0 3px black;
margin: 10px;
background: white;
border-radius: 10px;
}
.nav {
> ul {
background: white;
border: $grey;
>li {
@extend %box;
}
}
}
.demo{
width: 100px;
height: 100px;
@extend %box;
}
通过这种方法。CSS只是解析了一次
TIM图片20190112210931.png
@mixin和%（placeholder）的区别：
- @mixin可以传递参数，而%不行；
- @mixin的调用方式是@include，而%的调用方式是@extend；
- @include产生的样式是以复制拷贝的方式存在的，而@extend产生的样式是以组合申明的方式存在的。
网友评论