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. ORM--SqlSugar

    这个是很久之前就开始用的一款ORM,挺好用的,推荐~ 关键词: SqlSugar:一款小巧,并且功能齐全的ORM 参考手册网址:http://www.codeisbug.com/Home/Doc 多表 ...

  2. 三次握手和四次挥手以及TCP标志位的详细介绍

    一.TCP标志位 在讲TCP三次握手和四次挥手之前,先说一下TCP标志位,方便后续的理解. 简单来说,TCP标志位的值代表了当前请求的目的. 标志位一共有6种,分别是: SYN(synchronous ...

  3. SQL数据库—<6-001> 常用系统存储过程大全 --摘录网

    -- 来源于网络 -- 更详细的介结参考联机帮助文档 xp_cmdshell --*执行DOS各种命令,结果以文本行返回. xp_fixeddrives --*查询各磁盘/分区可用空间 xp_logi ...

  4. nginx实现高性能负载均衡的Tomcat集群

    1. 安装软件: nginx 两个apache-tomcat 安装过程省略. 2.配置两个tomcat的http端口,第一个为18080,第二个为28080 注意:需要把server.xml文件中所有 ...

  5. Sass-属性嵌套

    Sass 中还提供属性嵌套,CSS 有一些属性前缀相同,只是后缀不一样,比如:border-top/border-right,与这个类似的还有 margin.padding.font 等属性.假设你的 ...

  6. 配置本机的yum源

    配置本机的yum源 环境:操作系统CentOS6.5 1.挂在安装光盘 [root@CentOS40 ~]# mkdir -p /mnt/cdrom[root@CentOS40 ~]# mount / ...

  7. Linux中的系统服务_02

    Linux中的系统服务_02 1. 在linux增加服务后,如果要实现随着操作系统的启动而启动,需要是用chkconfig命令,加入到系统服务中. 但是对于的脚本的表头,需要增加如下内容 #!/bin ...

  8. webpack 学习1 安装构建项目

    本文中使用的webpack版本是4+,请注意区分 node.js安装 node.js下载地址 选择较低版本的稳定版下载,下载完成后得到的是一个msi文件,点击安装即可 安装完毕以后新建一个文件夹,并在 ...

  9. ubuntu oracle数据库18c安装

    一.官网下载linux两个zip包 二.byqKx8a2tWcgBHb

  10. NFA 、DFA 简述

    转载请注明出处 https://www.cnblogs.com/majianming/p/11823697.html 目前常见的正则表达引擎总体分为2种,DFA (确定型有穷状态自动机) 和 NFA ...