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    // 压缩模式

使用sass的更多相关文章

  1. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  2. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  3. wepack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  4. 前端CSS预处理器Sass

    前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

  5. SASS教程sass超详细教程

    SASS安装及使用(sass教程.详细教程) 采用SASS开发CSS,可以提高开发效率. SASS建立在Ruby的基础之上,所以得先安装Ruby. Ruby的安装: 安装 rubyinstaller- ...

  6. Sass之坑Compass编译报错

    前段时间在使用Compass时遇到了其为难处理的一个坑,现记录到博客希望能帮助到各位. 一.问题: 利用Koala或者是gulp编译提示如下,截图为koala编译提示错误: 二.解决办法 从问题截图上 ...

  7. emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点

    摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...

  8. Sass用法指南

    写在前面的话:随着CSS文件越来越大,内容越来越复杂,对其进行很好的维护将变的很困难.这时CSS预处理器就能够帮上大忙了,它们往往拥有变量.嵌套.继承等许多CSS不具备的特性.有很多CSS预处理器,这 ...

  9. PostCSS深入学习: PostCSS和Sass、Stylus或LESS一起使用

    如果你喜欢使用PostCSS,但又不想抛弃你最喜欢的预处理器.不用担心,你不需要作出二选一的选择,你可以把PostCSS和预处理器(Sass.Stylus或LESS)结合起来使用. 有几个PostCS ...

  10. Sass:初识Sass与Koala工具的使用

    一.下载Koala(找到合适的系统版本)并安装 二.先新建一个css文件夹,并在里面新建一个文本文档(.txt),将其命名为demo.scss 三.打开Koala,将css文件夹拽进来,可以修改一下输 ...

随机推荐

  1. js确认末尾字符算法挑战

    检查一个字符串(str)是否以指定的字符串(target)结尾. 如果是,返回true;如果不是,返回false. 这个挑战可以通过在ES2015中引入的.endsWith()方法来解决.但是出于这个 ...

  2. jackson的readTree有坑

    {"}] readTree认为上面的字符是json,坑啊 alibaba的fastjson 无论JSONObject.parseObject还是JSONObject.parseObject ...

  3. Java compiler level does not match the version of the installed Java project facet错误

    出现问题情景:从其他地方导入一个项目的时候报错:Java compiler level does not match the version of the installed Java project ...

  4. ros节点启动和关闭相关

    Ros node启动与关闭 1. ros运行单位: Ros程序运行的单位是ros node. 2. ros 节点的启动: (1)初始化ros节点:通过调用ros::init()接口实现:可以通过参数指 ...

  5. Chocolatey Window系统下的软件管理工具

    前言: 使用linux都喜欢使用yum ;apt-get来安装包,非常方便,那么windows也可以使用这样的方式. Chocolatey软件是Windows下的软件安装工具: 使用方法类似linux ...

  6. 五、properties编写

    1.properties和yml编写对比 2.properties中文乱码解决 上面的内容输出的结果 原因 idea 默认编码是UTF-8,properties需要修改对应的编码 设置编码后的结果正常 ...

  7. 内嵌iframe撑高父容器,底部有4px留白问题解决办法

    由于iframe是特殊标签, 1,iframe默认是块元素,其display样式默认值是block2,frame应该说即不是块元素也不是行内元素,它虽然有display样式,但其默认值是none3,f ...

  8. 斯特林数&斯特林反演

    第一类斯特林数 定义 第一类Stirling数\(s(n,m)\),也可记为\(\begin{bmatrix}n\\m\end{bmatrix}\). 第一类Stirling分为无符号第一类Stirl ...

  9. CF1061E Politics E. Politics 解题报告

    CF1061E Politics E. Politics 考虑利用树的性质,因为是子树问题,所以放到dfs序上. 只考虑一个树,问题是每个区间选恰好\(k\)个.因为区间其实是子树,所以区间要么包含, ...

  10. select into outfile的sql语句

             SELECT INTO…OUTFILE语句把表数据导出到一个文本文件中,并用LOAD DATA …INFILE语句恢复数据.但是这种方法只能导出或导入数据的内容,不包括表的结构,如果 ...