Sass创建简单的项目

傷城~ 2021-09-14 04:00 373阅读 0赞

# 一.sass简单搭建 #

## 1.创新项目 ##

f盘创建：sassDemo

![20170831160757857][]

## 2.编译成css文件 ##

### ①运行命令屏幕上显示.scss文件转化的css代码 ###

执行命令：sass   文件名（含路径的文件）

sass sassDemo\\sass\\test.scss

![20170831161155752][]

### ②显示css内容结果保存成文件 ###

执行命令：sass scss文件  css文件（内容保存的地方）

sass sassDemo\\sass\\test.scss  sassDemo\\stylesheets\\test.css

![20170831161347695][]

stylesheets文件夹中显示内容：

![20170831161401381][]

注意：

要把css放在某文件里面时，需要先创建这个文件夹（如stylesheets），否则会报错

![20170831161513503][]

### ③SASS提供四个编译风格 ###

\* nested：嵌套缩进的css代码，它是默认值。  
\* expanded：没有缩进的、扩展的css代码。  
\* compact：简洁格式的css代码。  
\* compressed：压缩后的css代码。

生产环境当中，一般使用最后一个选项。

sass --style compressed test.sass test.css

## 3.开启监听编译（自动生成编译） ##

你也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。

### ①Sass的单文件监听 ###

输入命令:sass --watch sass文件(test.scss):css文件（test.css ）

eg:sass --watch sassDemo\\sass\\test.scss:sassDemo\\stylesheets\\test.css

![20170831164947421][]

当.scss文件夹中的文件发生变化时,会更新.css文件![20170831165139498][]

### ②Sass的文件夹监听 ###

输入命令: sass --watch sass文件夹名:css文件夹名

eg: sass --watch sassDemo\\sass:sassDemo\\stylesheets

![20170831163723605][]

当.scss文件夹中的文件发生变化时,会更新.css文件,同时命令行输出提示:

![20170831163936833][]

![20170831164043482][]

SASS的官方网站，提供了一个[在线转换器][Link 1]。你可以在那里，试运行下面的各种例子。

## 4.关闭监听 ##

ctrl+c关闭监听

# 二.使用Compass搭建项目 #

##    (1). Compass是什么? ##

Compass由SASS的核心团队成员Chris Eppstein创建，是一个非常丰富的样式框架，包括大量定义好的mixin，函数，以及对SASS的扩展。

##    (2).Compass搭建项目 ##

①在f盘创建文件mySass文件

②打开运行命令，执行

compass create mySass\sass

出现下面：

![20170831134218730][]

解释是：

// 结果:↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 5 directory sass/ directory sass/sass/ // sass文件所在目录; directory sass/stylesheets/ // css文件所在目录; create sass/config.rb // 项目配置文件; create sass/sass/screen.scss // 主要针对屏幕的sass文件; create sass/sass/print.scss // 主要针对打印设备; create sass/sass/ie.scss // 主要针对IE浏览器; write sass/stylesheets/ie.css write sass/stylesheets/print.css write sass/stylesheets/screen.css // scss文件编译后对应的css文件;最终将引入到HTML中的文件; You may now add and edit sass stylesheets in the sass subdirectory of your project. 你现在可以在sass文件的子文件中(screen.scss/print.scss/ie.scss)添加和编辑项目的样式表; Sass files beginning with an underscore are called partials and won't be compiled to CSS, but they can be imported into other sass stylesheets. Sass文件以"_"开头的叫做局部文件,不会被编译成CSS;但它们可以被引入到其他Sass文件中; You can configure your project by editing the config.rb configuration file. 你可以通过编辑config.rb配置文件来配置项目信息; You must compile your sass stylesheets into CSS when they change. 当Sass文件被修改后,必须要编译Sass文件到CSS; 1. To compile on demand: // 直接编译; compass compile [path/to/project] 2. To monitor your project for changes and automatically recompile: compass watch [path/to/project] // 监听项目变化并且自动编译; To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage: <head> <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />  </head> 将编译后的文件引入到HTML页面中;

f:mySass文件中出现

![20170831134613081][]

③开启监听编译

a./进入项目文件夹, 执行命令：

cd  mySass\\sass

b.开启监听，执行命令

compass watch

![20170831135452016][]

④编辑css,在screen.scss （主要针对屏幕的sass文件）

![20170831135902426][]

运行命令中会出现

![20170831135951022][]

而stylesheets/screen.css （ scss文件编译后对应的css文件;最终将引入到HTML中的文件;）

自动编译成css

![20170831140115563][]

(3).在项目中使用，创建index.html

在html中引入的文件还是css文件，是scss自动编译后的文件

![20170831141836082][]

预览

![20170831141909164][]

[20170831160757857]: /images/20210813/a888e883aebd428eb9e4b109cf4103fc.png
[20170831161155752]: /images/20210813/a5fe4f6b607b486d933a1d25baf79f6b.png
[20170831161347695]: /images/20210813/0e97338125354de18611bf05f1ff063b.png
[20170831161401381]: /images/20210813/5a779f9c838748eda40f7d4baa93a1da.png
[20170831161513503]: /images/20210813/ca9b0157c30e4a07902072b67b58011c.png
[20170831164947421]: /images/20210813/c230377ac208421aa775fc12c7601016.png
[20170831165139498]: /images/20210813/aa1ea505aca54b459a288ffe58869c06.png
[20170831163723605]: /images/20210813/ff745cafa79f468ba6ea0cbb8156a0db.png
[20170831163936833]: /images/20210813/723c1e2017f64a25a1b75fc74db86a12.png
[20170831164043482]: /images/20210813/9f70c9e219e94508a979484cfb8ead5a.png
[Link 1]: http://sassmeister.com/
[20170831134218730]: /images/20210813/eecab3a4fe054a73ab853fac6f09bbec.png
[20170831134613081]: /images/20210813/59c008d3dca74cdb866795a7d0b1e894.png
[20170831135452016]: /images/20210813/12360583f0d7454985690415b11e0b81.png
[20170831135902426]: /images/20210813/ec89b2a76c3941f1b1a8a483514d701d.png
[20170831135951022]: /images/20210813/619218581c9c4bd4b952fb690715a6bb.png
[20170831140115563]: /images/20210813/1ef3cd3791514bf6b26379848927f5c6.png
[20170831141836082]: /images/20210813/1ebf9639c7b94ed8ad658c8475e014c2.png
[20170831141909164]: /images/20210813/ee7f13b238504150bd9a189c75ddca53.png