使用sass

忘是亡心i 2021-10-13 17:56 293阅读 0赞

# sass安装 compass安装 #

##### 1.sass 需要安装ruby,然后通过gem安装sass. #####

##### 2. less有想=两种安装方: #####

**客户端安装**:  
引入less.js,然后就可以直接用.less文件

<link rel="stylesheet/less" type="text/css" href="文件路径"/style.less>
    <script src="文件路径/less.js" > </script>

**服务器安装** 安装node,使用npm安装less

### 1.安装ruby ###

http://www.ruby-lang.org/zh_cn/downloads/

### 2.查看ruby版本 ###

ruby -v

### 3.安装sass ###

gem install sass

### 4. 查看 sass版本 ###

sass -v

### 5.安装compass ###

gem install compass

### 6.创建目录 ###

compass create chen

在sass文件新建demo.scss文件

### 7.命令行进入当前目录compass编译 ###

在写代码之前，我们还要知道如何编译。因为我们写出来的是后缀名为scss的文件，只有编译成css文件，才能用在网站上。  
Compass的编译命令是

compass compile

*  #### 有四种编译模式 ####

1. 嵌套输出方式 nested
    2. 展开输出方式 expanded  
    3. 紧凑输出方式 compact 
    4. 压缩输出方式 compresse

该命令在项目根目录下运行，会将sass子目录中的scss文件，编译成css文件，保存在stylesheets子目录中。  
默认状态下，编译出来的css文件带有大量的注释。但是，生产环境需要压缩后的css文件，这时要使用--output-style参数。

compass compile --output-style expanded    // 压缩模式

转载于:https://www.cnblogs.com/dobeco/p/11295140.html

发表评论取消回复

表情：

评论列表（有 0 条评论，293人围观）

还没有评论，来说两句吧...

相关阅读

相关使用Sass (二）

查看文档： [https://www.sass.hk/docs/][https_www.sass.hk_docs] [Sass (Syntactically Awesome

淡淡的烟草味﹌/ 2023年10月18日 11:13/ 0 赞/ 23 阅读

相关 sass css 在线转换_使用Sass转换印刷单位

sass css 在线转换 ![Typography Units Conversion with Sass][] This is the updated version o

不念不忘少年蓝@/ 2022年12月03日 09:10/ 0 赞/ 154 阅读

相关 vue使用sass

vue使用sass node 安装版本 12.16.3 sass版本 ![在这里插入图片描述][f2f9f78567a145589cb3e9a997a26d06.

Dear 丶/ 2022年09月14日 02:29/ 0 赞/ 230 阅读

相关如何使用sass

文章目录前言使用编译器中sass插件的版本问题本地下载编译使用 -------------------- 前言最

Bertha 。/ 2022年09月03日 14:28/ 0 赞/ 244 阅读

相关 Sass：初识Sass与Koala工具的使用

一、下载 Koala（找到合适的系统版本）并安装 ![121224586276954.png][] 二、先新建一个css文件夹，并在里面新建一个文本文档(.tx

忘是亡心i/ 2022年06月17日 10:36/ 0 赞/ 202 阅读

相关使用sass绘制三角形

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 用border生成三角形的@mixin： //

水深无声/ 2022年01月13日 08:09/ 0 赞/ 281 阅读

相关使用sass

sass安装 compass安装 1.sass 需要安装ruby,然后通过gem安装sass. 2. less有想=两种安装方: 客户端安装: 引入les

忘是亡心i/ 2021年10月13日 17:56/ 0 赞/ 294 阅读

相关 vue项目使用sass，sass与scss异同

scss是sass3引入的新语法，语法完全兼容css3,也完全继承了sass的功能，也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。另外，SCS

旧城等待，/ 2021年08月13日 11:11/ 0 赞/ 486 阅读

相关 mpvue 使用sass

1、安装 cnpm install --save sass-loader@7.1.0 node-sass 2、style中,lang='s

小灰灰/ 2021年07月24日 23:22/ 0 赞/ 491 阅读

相关 vue 使用sass/scss

1、安装 cnpm install sass-loader@7.3.1 --save-dev //8.0版本太高会报错(web3.x版本) cnp

左手的ㄟ右手/ 2021年07月24日 11:44/ 0 赞/ 532 阅读