使用sass
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的更多相关文章
- wepack+sass+vue 入门教程(三)
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程(二)
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程(一)
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- 前端CSS预处理器Sass
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
- SASS教程sass超详细教程
SASS安装及使用(sass教程.详细教程) 采用SASS开发CSS,可以提高开发效率. SASS建立在Ruby的基础之上,所以得先安装Ruby. Ruby的安装: 安装 rubyinstaller- ...
- Sass之坑Compass编译报错
前段时间在使用Compass时遇到了其为难处理的一个坑,现记录到博客希望能帮助到各位. 一.问题: 利用Koala或者是gulp编译提示如下,截图为koala编译提示错误: 二.解决办法 从问题截图上 ...
- emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点
摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...
- Sass用法指南
写在前面的话:随着CSS文件越来越大,内容越来越复杂,对其进行很好的维护将变的很困难.这时CSS预处理器就能够帮上大忙了,它们往往拥有变量.嵌套.继承等许多CSS不具备的特性.有很多CSS预处理器,这 ...
- PostCSS深入学习: PostCSS和Sass、Stylus或LESS一起使用
如果你喜欢使用PostCSS,但又不想抛弃你最喜欢的预处理器.不用担心,你不需要作出二选一的选择,你可以把PostCSS和预处理器(Sass.Stylus或LESS)结合起来使用. 有几个PostCS ...
- Sass:初识Sass与Koala工具的使用
一.下载Koala(找到合适的系统版本)并安装 二.先新建一个css文件夹,并在里面新建一个文本文档(.txt),将其命名为demo.scss 三.打开Koala,将css文件夹拽进来,可以修改一下输 ...
随机推荐
- mybatis默认的数据源连接池(PooledDataSource和UnPooledDataSource)
一般情况下我们操作数据库都是通过connection,但是频繁创建和删除connection会严重影响效率,因此在这种情况下我们一般会用到连接池,因为项目中用到的是mybatis,所以了解一下myba ...
- db2表
生成列: CREATE TABLE t1 (c1 INT, c2 DOUBLE, c3 DOUBLE GENERATED ALWAYS ...
- SetDefaultDllDirectories问题
换台电脑编译报错! 在使用Visual Studio 2013编译程序的时候报以下错误 vc\atlmfc\include\atlcore.h(638): error C2039: “”: 不是“`g ...
- Python3.5-20190513-廖老师-自我笔记-函数式编程
把复杂的任务拆成各个小的函数,通过函数的调用来完成任务.这就是面向过程编程. 高阶函数:就是让函数的参数能够接收别的函数.把函数作为参数传入到另一个函数. 函数名也是变量.和变量用法一样的,指向一个函 ...
- 致第一次安装(yong)小小输入法的你
目录 强大全开放的外挂内置输入平台 支持各种编码 方便的词库维护功能 最温情的输入法 小鹤双拼自定义 本文的题目就参考了百度贴吧「致第一次安装 RIME 的你」,因为最近使用小小输入法,感觉很好用,所 ...
- maven知识
首先下载maven 然后win的配置环境变量 maven目录结构 --main --java --package --test --java --package resources maven 需要有 ...
- static 关键字详解(用途、误区、面试题)
static关键字是很多朋友在编写代码和阅读代码时碰到的比较难以理解的一个关键字,也是各大公司的面试官喜欢在面试时问到的知识点之一.下面就先讲述一下static关键字的用法和平常容易误解的地方,最后列 ...
- STM32的结构和启动模式
一.STM32F10x功能模块 32位的Cortex-M3微处理器: 可嵌套的向量中断控制器(NVIC)和60个可屏蔽中断且有16个可编程优先级: 内嵌内存: FLASH:最大512K字节 STAM: ...
- eureka学习(二)
eureka服务端创建好后,现在我们让eureka客户端(也就是服务提供者)注册到eureka上去. 首先加入依赖包: <!--将微服务provider注册到eureka--> <d ...
- Windows Server服务器之介绍及版本信息
Windows Server是Microsoft Windows Server System(WSS)的核心,Windows的服务器操作系统.每个Windows Server都与其家用(工作站)版对应 ...