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. cf:c题

    题目: 代码: #include<iostream> #include<algorithm> #include<vector> #include<string ...

  2. 讲真,下次打死我也不敢随便改serialVersionUID了

    讲真,下次打死我也不敢随便改serialVersionUID了 码农沉思录 码农沉思录 微信号 code-thinker 功能介绍 笔者为国内某知名企业不知名码农,专注Java Web领域多年,有丰富 ...

  3. 从vue的组件传值着手浅谈观察者模式

    首先,提到观察者模式,这不禁让我想到了MVVM,MVVM架构模式感觉用到了观察者的思想. 我们还是按照惯例,了解一下什么是观察者模式 观察者模式,类似发布订阅模式,完成这个动作首先最少得有两个不同的对 ...

  4. python问答

    1)什么是Python?使用Python有什么好处? Python是一种编程语言,包含对象,模块,线程,异常和自动内存管理.Python的好处在于它简单易用,可移植,可扩展,内置数据结构,并且它是一个 ...

  5. 【LeetCode】Array

    [11] Container With Most Water [Medium] O(n^2)的暴力解法直接TLE. 正确的解法是Two Pointers. O(n)的复杂度.保持两个指针i,j:分别指 ...

  6. 致第一次安装(yong)小小输入法的你

    目录 强大全开放的外挂内置输入平台 支持各种编码 方便的词库维护功能 最温情的输入法 小鹤双拼自定义 本文的题目就参考了百度贴吧「致第一次安装 RIME 的你」,因为最近使用小小输入法,感觉很好用,所 ...

  7. bzoj 3626

    http://www.lydsy.com/JudgeOnline/problem.php?id=3626 让我比较惊讶的一道链剖裸题(' '    ) 做法很精妙 首先我们考虑对于单个询问时可以拆分成 ...

  8. 【Flutter学习】基本组件之基本滑动PageView组件

    一,概述 PageView 是一个滑动视图列表,它也是继承至 CustomScrollView 的. 二,构造函数 类命构造函数(PageView) PageView 使用场景:创建一个可滚动列表 构 ...

  9. 【已转移】【Java架构:基础技术】一篇文章搞掂:Java 8

    本文篇幅较长,建议合理利用右上角目录进行查看(如果没有目录请刷新). 一.Java的历史与演变 目的:为完全了解Java,需要理解Java的诞生原因.成型动力以及他继承的思想. 计算机语言的创新与发展 ...

  10. linux教程及常用命令手册

    Linux 教程 Linux 教程.Linux 简介.Linux 安装.Linux 系统启动过程.Linux 系统目录结构.Linux 忘记密码解决方法.Linux 远程登录.Linux 文件基本属性 ...