web前端之sass简介
Sass简介
大家都知道,js 中可以自定义发量,css 仅仅是一个标记语言,不是编程语言,因此不可以自定义发量、不可以引用等等。
面对这些问题,我们现在来引入 Sass,简单的说,他是 css 的升级版,可以自定义发量,可以有 if 语句,还可以嵌套等等,很神奇吧!那下面我们就来介绍返个神奇的 Sass。
Sass比Less的功能更强大,也更复杂。
Sass 的定义
Sass:英文是 Syntactically Awesome Stylesheets Sass。最早由 Hampton Catlin 开发和设计。 一种帮助你简化 CSS 工作流程的方式,帮助你更容易维护和开发 CSS 内容。
官网是:https://sass-lang.com/
Sass 是这个世界上最成熟、稳定和强大的专业级 CSS 扩展语言。
Sass专注的是怎样创建优雅的样式表,而不是内容。
Sass、Compass与CSS
关系:
- Less/Sass是语法、Compass是框架、CSS是目标。
Sass&Compass的好处:
写出更优秀的CSS。
解决CSS编写过程中的痛点问题,比如精灵图合图、属性的浏览器前缀处理等。
有效组织样式、图片、字体等项目元素。
受众群体:
重构的同学,写很多CSS,不知如何自动化。
希望在项目周期内更好地组织项目内容。
Sass的安装
sass引擎是用Ruby语言开发的(但是两者的语法没有关系),因此在安装 Sass 前,需要先安装Ruby(mac下自带Ruby无需再安装Ruby)。
下面来讲一下 Windows 下的安装Sass的步骤。
第一步:安装Ruby(windows环境)
下载地址:http://rubyinstaller.org/downloads/
貌似网络很慢,不一定能下载成功~
安装时,记得勾选“环境变量”:
安装完ruby之后,在命令行中输入ruby -v
,查看ruby的的版本:
关于Mac下的Ruby
刚刚说了,Mac下自带Ruby,但是版本肯定很老:
有的时候,我们可能需要使用特定版本的ruby,或者在不同的ruby版本之间进行切换,所以,大家可以尝试安装rvm
,它是ruby的版本管理工具。官网是:https://rvm.io
第二步:安装 Sass
安装完ruby之后,在开始菜单中,找到刚才我们安装的ruby,打开Start Command Prompt with Ruby。输入gem install sass
安装Sass。
PS:Ruby 是使用 gem 来管理它的各种包(比如Sass)。我们安装好ruby之后,gem会自动安装上;类似于,我们安装完node之后,npm也自动安装好了。
但是,由于访问网络受限,我们可以先切换到淘宝的镜像,再安装Sass。步骤如下:
(1)移除默认的镜像,添加淘宝的镜像:
gem sources --remove https://rubygems.org/gem sources -a https://ruby.taobao.org/ //注意:如果你系统不支持https,请将淘宝源更换成:gem sources -a http://gems.ruby-china.org
PS:我测试了一下,Win 7 不支持https,Mac支持https。
(2)查看当前使用的是哪个镜像:
gem sources -l
(3)安装sass:
紧接着,输入如下命令安装Sass:
gem install sass // 如果mac下输入这个命令时没有权限,则需要在前面加上 sudo
系统会自动安装上最新版本的Sass。
查看sass版本的命令为:
sass -v
升级sass版本的命令为:
gem update sass
你也可以运行帮助命令行来查看你需要的命令:
sass -h
参考链接:https://www.w3cplus.com/sassguide/install.html
Compass 简介和安装
安装完sass之后,我们在main.scss中写一些代码,然后输入如下命令,就可以将scss文件
转化为css文件
:
sass main.scss main.css
然而,真正的项目开发中,我们不一定是直接使用 sass 命令,而是使用 Compass。
Compass 简介
官网是:http://compass-style.org/。
Compass 是开源的CSS书写框架。
Compass 安装
输入如下命令安装 Compass:
gem isntall compass
输入如下命令查看版本:
compass -v
compass可以直接用来搭建前端项目的样式部分,但并不是常用的方法。
Compass的简单使用
通过 Compass 创建工程目录:
cd workspacecompass create CompassDemo
文件结构如下:
/sass
- ie.scss
- print.scss
- screen.scss
/stylesheets
- ie.css
- print.css
- screen.css
config.rb
为了能够让文件实时编译,我们可以通过 copass watch 监听sass文件的变化:
cd CompassDemocompass watch
当.scss文件改动时,会自动生成对应的.css文件。
Sass的语法
两种后缀名(两种语法)
sass 有两种后缀名文件:
(1).sass
:对空格敏感。不使用大括号和分号,所以每个属性之间是通过换行来分隔。
比如:
h1color: #000background: #fff
这种语法是类ruby的语法,和CSS的语法相比,相差较大。所以,在3.0版本中就引入了.scss
的语法。
(2).scss
:是css语法的超集,可以使用大括号和分号。
比如:
h1 {color: #000;background: #fff;
}
注意:一个项目中可以混合使用两种语法,但是一个文件中不能同时使用两种语法。
两种格式之间的转换:
我们在工程目录下新建main.scss
,输入如下代码:
*{margin: 0;padding: 0;
}
然后输入如下命令,就可以将上面的main.scss
转化为main.sass
:
sass-convert main.scss main.sass
打开生成的main.sass
,内容如下:
*margin: 0padding: 0
变量语法
Sass 是通过$
符号来声明变量。
(1)我们新建一个文件_variables.scss
,这个文件专门用来存放变量,然后在其他的文件中引入_variables.scss
即可。
因为这个文件只需要存储变量,并不需要它编译出对应的 css 文件,所以我们给文件名的前面加了下划线,意思是声明为局部文件。
我们在这个文件中,声明两个字体变量:
$font1: Braggadocio, Arial, Verdana, Helvetica, sans-serif;$font2: Arial, Verdana, Helvetica, sans-serif;
(2)新建文件main.scss,在里面引入步骤(1)中的变量文件:
@import "variables"; // 引入变量文件.div1{font-family: $font1;
}.div2{font-family: $font2;
}
基于 Sass 的既定规则:
没有文件后缀名时,Sass 会自动添加 .scss 或者 .sass 的后缀(具体要看已经存在哪个后缀的文件)。
同一目录下,局部文件和非局部文件不能重名。
对应生成的main.css文件如下:
main.css
/* line 9, ../sass/main.scss */
.div1 {font-family: Braggadocio, Arial, Verdana, Helvetica, sans-serif;
}/* line 13, ../sass/main.scss */
.div2 {font-family: Arial, Verdana, Helvetica, sans-serif;
}
注释语法
单行注释:
//我是单行注释
块级注释:
/*我是块级注释哈哈
*/
二者的区别是:单行注释不会出现在自动生成的css文件中。
web前端之sass简介相关推荐
- WEB前端 网页设计 简介
目录 web前端简介 什么是HTML? HTML标签 HTML基本结构 在head中设置网页标题和字符集编码 HTML 段落标签 HTML 换行标签 HTML标题 HTML 水平线 HTML注释 HT ...
- 前端入门教程(二)Web前端与HTML简介
一 web1.0时代的网页制作 网页制作是web1.0时代的产物,那个时候的网页主要是静态网页,所谓的静态网页就是没有与用户进行交互而仅仅供读者浏览的网页,我们当时称为"牛皮癣"网 ...
- Web前端之less简介
目录 一.less简介 二.安装插件 三.编写less 四.less语法 less注释 父子关系嵌套 变量 其他 五.混合函数 六.补充 一.less简介 less是一门css的预处理语言 less是 ...
- html5web前段页面,HTML5+CSS3 Web前端开发
HTML5+CSS3 Web前端开发 编辑 锁定 讨论 上传视频 <HTML5+CSS3 Web前端开发>是2018年5月清华大学出版社出版的图书,作者是唐四薪.ISBN为97873024 ...
- web前端简介 | 什么是前端
前端简介 前端de概念 前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页.多数后端开发人员从事于构建工作应用程序背后的实际逻辑.前后端需要相互配合,共同完成一个项目.那到底什么是 ...
- 03、web前端简介
文章目录 前言 一.web前端简介 二.HTML(超文本标记语言) 2.1 元素.内容和标签 2.2 HTML DOM树 三.CSS和Javascript 3.1 CSS 3.2 Javascript ...
- Web前端HTML简介
Web前端HTML简介1.系统结构:B/S架构:(java程序员所走的方向就是这个方向)全称:Browser/Server (浏览器/服务器 的交互形式) Browser支持的语言有HTML.CSS. ...
- web前端开发技术实验与实践(第三版)储久良编著 项目13 设计新生课程简介
web前端开发技术实验与实践(第三版)储久良编著 项目13 设计新生课程简介 实训三 项目13 设计新生课程简介 一.页面文字素材: 英语 基础英语.高级英语.报刊选读.视听.口语.英语写作.翻译 ...
- 【Web前端HTML5CSS3】01-前端简介
笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版 文章目录 前端简介 1. 软件的分类 1.1. 系统软件 1.2. 应用软件 1.3. 游戏软件 2. 客户端与服务器 ...
最新文章
- DataGrid的使用
- 初探 es6 promise
- 全球及中国现金回收机行业销售前景与运营效益分析报告2022版
- 设计模式-原型模式(Prototype)
- RabbitMQ六种队列模式-工作队列模式
- 碧蓝航线维护服务器时间,碧蓝航线3月21日维护时间更新公告 新增与更改内容介绍...
- atom无法安装插件的解决方法之一
- LintCode—删除链表中倒数第n个节点(174)
- 深度学习算法原理——神经网络的基本原理
- 用html制作粒子线条,html5 canvas跟随鼠标粒子线条动画特效
- kirin710f是什么处理器_hisiliconkirin710是什么处理器
- 如何在不同节之间设置页码
- require.js 介绍
- 2022年蓝牙耳机品牌推荐,三八女神节无线蓝牙耳机礼物推荐
- 使用Python读取XMind格式测试用例,循环处理字符串
- dlink客户端 android,DLink IP Cam Viewer by OWLR
- JASMINER X4为什么能异军突起?
- mmse评估量表_简易精神状态评价量表(MMSE)
- 选股器用计算机测试利润,ROE+市盈率选股 上周使用计算公式:总得分=营业净利润率+资产负债率+市盈率,来筛选股票。 因为笔者不会计算机编程,在计算历年平均值的时候... - 雪球...
- 应用集成的尴尬 (转)
热门文章
- python从入门到大师_Python趣味打怪:60秒学会一个例子,147段简单代码助你从入门到大师 | 中文资源...
- word 直接插入参考文献,不借助插件
- c语言混响,【搬运】频点与混响调节
- 电力系统OMS服务器死机,浪潮TS850支撑山东电力OMS 直面小型机竞争
- C/C++ vector 删除指定元素
- C#使用IronPython调用Python
- su组件在什么窗口_SU实用技巧曝光!小白也能开挂建模啦~
- Python三国华容道程序-深度优先
- Windows10 Technical Preview使用感受!
- 第11章 下载xkcd的漫画