使用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文件夹拽进来,可以修改一下输 ...
随机推荐
- SpringBoot-技术专区-异步编程
最近在实现一个聚合搜索的需求时,由于需要从五个索引中查询数据,然后再将搜索结果组合返回给前端app展现,显然这个地方不能再用同步的方式来操作了,如果有一个索引查询出现耗时较长,那么其余的请求都会排同步 ...
- java面试题-看到那记录到哪
哈希冲突 如果两个不同的元素,通过哈希函数得到的实际存储地址相同怎么办?也就是说,当我们对某个元素进行哈希运算,得到一个存储地址,然后要进行插入的时候,发现已经被其他元素占用了,其实这就是所谓的哈希冲 ...
- ASP.NET Core 2.1 JWT token (一) - 简书
原文:ASP.NET Core 2.1 JWT token (一) - 简书 JwtBearer认证是一种标准的,通用的,无状态的,与语言无关的认证方式.Bearer验证属于HTTP协议标准验证. 如 ...
- docker概述与安装及运行容器
传统虚拟化 传统虚拟化步骤 1.安装虚拟化软件以及虚拟化的管理软件 2.创建虚拟机 3.给虚拟机安装os 4.在虚拟机内部不是应用(http.db之类的应用) 传统虚拟化的特点 1.VM与VM之间是完 ...
- C中printf函数的用法总结
函数语法 stdio.h文件中的定义: /* Write formatted output to stdout. */ int printf (const char *__restrict __for ...
- plt.imshow()
import matplotlib.pyplot as plt plt.imshow(digits.images[-1], cmap = plt.cm.gray_r) .imshow() Plotti ...
- 【leetcode】987. Vertical Order Traversal of a Binary Tree
题目如下: Given a binary tree, return the vertical order traversal of its nodes values. For each node at ...
- UNP学习 广播
一.概述 虽然UDP支持各种形式的地址,但TCP只支持单播地址. 上图要点是: IPv4对多播的支持是可选的,而IPv6则时必须的. IPv6没有提供对广播的支持:当使用广播的IPv4应用程序一直到I ...
- SCP-Py-002
项目编号:Py-002 项目等级:EuclidKeter 特殊收容措施: Py-002-1目前被映射在Researcher Kevin的服务器位于Site-Pyproject地下防无线电渗透室且被切断 ...
- vue实现选项卡切换效果
效果如下: 说明: 这里我使用的原理是利用vue中的v-show/显示隐藏指令,当为true的时候显示,为false的时候隐藏 1html代码: <head> <meta chars ...