美文网首页
Sass 快速入门

Sass 快速入门

作者: 蒋小小喵 | 来源:发表于2018-11-20 19:50 被阅读0次

官方资源

Sass 官网:https://sass-lang.com/

Sass 中文网:https://www.sass.hk/guide/

Ruby 官网:http://www.ruby-lang.org

compass:http://compass-style.org

compass 实例:http://compass-style.org/examples/

compass 模块:http://compass-style.org/examples/compass/

开发环境

ruby

编译方式

1、Compass(CSS开源框架)

2、Easy Sass (VSCode 插件)

3、Koala (可视化编译工具)

Compass(推荐)

一、安装

安装Ruby,官网下载压缩包,解压到D盘,添加环境变量path:D:\software\Ruby2.5.3\bin

安装 sass 和 compass,注:gem 是 Ruby 内部命令

gem install sassgem install compass//以下命令备用gem update sass//升级//如果安装失败,试着替换源,不要用taobao的,用ruby-china这个gem sources --removehttps://rubygems.org/gem sources --addhttp://gems.ruby-china.org/

二、创建项目

使用compass创建项目

compass create

三、编辑项目

新建 index.html,引入编译后的样式 index.css

在 sass 的 index.scss 里进行编辑

四、编译css

compasscompilecompass watch//也可开启实时编译

提示:

如果想修改编译后的文件名,须把 config.rb 里的变量 css_dir 改成一致,例如 css_dir = "css"

设置不带注释编译 line_comments = false

VSCode插件

Easy Sass : 自动编译 SASS/SCSS 文件到 .css 和 .min.css 。还可以快速编译项目中的所有 SCSS/SASS 文件。默认编译到当前目录下,可修改配置:

"easysass.targetDir":"./css"

可视化编译工具:Koala

官网:http://koala-app.com/

github:https://github.com/oklai/koala/

优缺点:不用装环境也能编译, 但不能编译中文,可通过修改文件D:\Koala\rubygems\gems\sass-3.4.9\lib\sass\engine.rb解决, 在require最下面加入以下代码.

Encoding.default_external= Encoding.find('utf-8')

相关文章

  • sass快速入门

    本文参考阮一峰的《SASS用法指南》 一、申明变量 申明变量用$ 1.1调用变量,变量作为值用 1.2当变量作为属...

  • Sass 快速入门

    官方资源 Sass 官网:https://sass-lang.com/ Sass 中文网:https://www....

  • Sass快速入门

    摘抄于Sass中文网, 方便以后查看。 1. 使用变量; sass让人们受益的一个重要特性就是它为css引入了变量...

  • sass简单快速入门

    http://www.ruanyifeng.com/blog/2012/06/sass.html http://s...

  • Sass快熟入门与简单实战

    Sass入门与实战 **Sass is the most mature, stable, and powerful...

  • Sass 简单入门、快速上手

    [toc] 前言 本文所有的演示都是基于Win10操作系统。 关于Sass 1.定义 Sass的学名叫“CSS预处...

  • Sass概览

    sass英文官方网站sass中文网 翻译自sass英文官方网站 sass入门 在你使用Sass之前,你需要先在你的...

  • 第一个模块 Sass入门篇

    慕课网 Sass入门篇慕课网 http://www.imooc.com/w3cplus学习 Sass入门篇 安装s...

  • Sass教程: 简单入门、快速上手

    前言 本文所有的演示都是基于Win10操作系统。 关于Sass 1.定义 Sass的学名叫“CSS预处理器”,就是...

  • Sass 入门

    Sass 入门 Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variable...

网友评论

      本文标题:Sass 快速入门

      本文链接:https://www.haomeiwen.com/subject/tetfqqtx.html