add file:sass入门

This commit is contained in:
qianguyihao 2018-04-07 23:00:17 +08:00
parent 09651b53bc
commit 5756787f81
3 changed files with 233 additions and 2 deletions

231
02-CSS进阶/Sass入门.md Normal file
View File

@ -0,0 +1,231 @@
## Sass简介
大家都知道js 中可以自定义发量css 仅仅是一个标记语言,不是编程语言,因此不可以自定义发量、不可以引用等等。
面对返些问题,我们现在来引入 Sass简单的说他是 css 的升级版,可以自定义发量,可以有 if 语句,还可以嵌套等等,很神奇吧!那下面我们就来介绍返个神奇的 Sass。
Sass比Less的功能更强大也更复杂。
### Sass 的定义
Sass英文是 Syntactically Awesome Stylesheets Sass。最早由 Hampton Catlin 开发和设计。 一种帮助你简化 CSS 工作流程的方式,帮助你更容易维护和开发 CSS 内容。
官网是:<https://sass-lang.com/>
Sass 是这个世界上最成熟、稳定和强大的专业级 CSS 扩展语言。
Sass专注的是怎样创建优雅的样式表而不是内容。
### Sass、Compass与CSS
**关系:**
- Less/Sass是语法、Compass是框架、CSS是目标。
**Sass&Compass的好处**
- 写出更优秀的CSS。
- 解决CSS编写过程中的痛点问题比如精灵图合图、属性的浏览器前缀处理等。
- 有效组织样式、图片、字体等项目元素。
**受众群体:**
- 重构的同学写很多CSS不知如何自动化。
- 希望在项目周期内更好地组织项目内容。
## Sass的安装
sass引擎是用Ruby语言开发的但是两者的语法没有关系因此在安装 Sass 前需要先安装Rubymac下自带Ruby无需再安装Ruby
下面来讲一下 Windows 下的安装Sass的步骤。
### 第一步安装Rubywindows环境
下载地址:<http://rubyinstaller.org/downloads/>
貌似网络很慢,不一定能下载成功~
安装时,记得勾选“环境变量”:
20180407_2022.png
安装完ruby之后在命令行中输入`ruby -v`查看ruby的的版本
20180407_2039.png
### 关于Mac下的Ruby
刚刚说了Mac下自带Ruby但是版本肯定很老
20180407_2145.png
有的时候我们可能需要使用特定版本的ruby或者在不同的ruby版本之间进行切换所以推荐大家安装`rvm`它是ruby的版本管理工具。官网是<https://rvm.io>
### 第二步:安装 Sass
安装完ruby之后在开始菜单中找到刚才我们安装的ruby打开Start Command Prompt with Ruby。输入`gem install sass`安装Sass。
PSRuby 是使用 gem 来管理它的各种包比如Sass。我们安装好ruby之后gem会自动安装上类似于我们安装完node之后npm也自动安装好了。
但是由于访问网络受限我们可以先切换到淘宝的镜像再安装Sass。步骤如下
1移除默认的镜像添加淘宝的镜像
```
gem sources --remove https://rubygems.org/
gem sources -a https://ruby.taobao.org/ //注意如果你系统不支持https请将淘宝源更换成gem sources -a http://gems.ruby-china.org
```
PS我测试了一下Win 7 不支持httpsMac支持https。
2查看当前使用的是哪个镜像
```
gem sources -l
```
20180407_2050.png
3安装sass
紧接着输入如下命令安装Sass
```
gem install sass // 如果mac下输入这个命令时没有权限则需要在前面加上 sudo
```
系统会自动安装上最新版本的Sass。
查看sass版本的命令为:
```
sass -v
```
升级sass版本的命令为
```
gem update sass
```
你也可以运行帮助命令行来查看你需要的命令:
```
sass -h
```
20180407_2100.png
参考链接:<https://www.w3cplus.com/sassguide/install.html>
## Compass 简介和安装
安装完sass之后我们在main.scss中写一些代码然后输入如下命令就可以将`scss文件`转化为`css文件`
```
sass main.scss main.css
```
然而,真正的项目开发中,我们很少直接使用 sass 命令,一般是使用 Compass。
### Compass 简介
官网是:<http://compass-style.org/>
Compass 是开源的CSS书写框架。
### Compass 安装
输入如下命令安装 Compass
```
gem isntall compass
```
输入如下命令查看版本:
```
compass -v
```
20180407_2208.png
compass可以直接用来搭建前端项目的样式部分但并不是常用的方法。
### Compass的简单使用
```
cd workspace
compass create CompassDemo
```
文件结构如下:
- /sass
- ie.scss
- print.scss
- screen.scss
- /stylesheets
- ie.css
- print.css
- screen.css
- config.rb
## Sass的语法
### 两种后缀名(两种语法)
sass 有两种后缀名文件:
1sass对空格敏感。不使用大括号和分号所以每个属性之间是通过换行来分隔。
比如:
```
h1
color: #000
background: #fff
```
这种语法是类ruby的语法和CSS的语法相比相差较大。所以在3.0版本中就引入了`.scss`的语法。
2scss是css语法的超级可以使用大括号和分号。
比如:
```
h1 {
color: #000;
background: #fff;
}
```
注意:一个项目中可以混合使用两种语法,但是一个文件中不能同时使用两种语法。

View File

@ -246,7 +246,7 @@ nvm list|ls
``` ```
安装指定版本的node **安装指定版本的node**
``` ```
nvm install 版本号 [arch] nvm install 版本号 [arch]

View File

@ -255,7 +255,7 @@ PS了解、熟悉、精通是有区别的。
- `可用性、可访问性`:侧重于网站的性能。 前端要做性能监控、错误监控。JS异常分为两种**运行异常**、**资源加载错误**。一般人只能说出第一种异常。 - `可用性、可访问性`:侧重于网站的性能。 前端要做性能监控、错误监控。JS异常分为两种**运行异常**、**资源加载错误**。一般人只能说出第一种异常。
3`工程化`**工程化**已经是前端的必备技能。`webpack`是必须的工具,`grunt`已经过时了,如果公司提到,还是要了解。`Glup`用的很多。 3`工程化`**工程化**已经是前端的必备技能。`webpack`是必须的工具,`grunt`已经过时了,如果公司提到,还是要了解。`Gulp`用的很多。
4写得比较虚面试时基本很难考察。面试时如果写代码要注意代码风格该用 class、id、标签时要注意区分。 4写得比较虚面试时基本很难考察。面试时如果写代码要注意代码风格该用 class、id、标签时要注意区分。