【项目实战】sass使用基础篇(上)
Sass是一种CSS预处理语言。CSS预处理语言是一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性(完全兼容css3),让css更加简洁、适应性更强,可读性更佳,更易于代码的维护等诸多好处。
CSS预处理语言有Scss(Sass) 和Less、Postcss。
Scss和Sass
sass一开始用的是一种缩进式的语法格式
采用这种格式文件的后缀名是.sass
在sass3.0版本后我们常用的是sassy css语法,扩展名是.scss,更接近与css语法
区别:
- 后缀名不同 .sass和.scss
- 语法不同,请看下面
新版:
/*新版本
多行文本注释*/
//新版本
//单行文本注释
@import "base";
@mixin alert{
color:red;
background:blue;
}
.alert-warning{
@include alert;
}
ul{
font-size:15px;
li{
list-style:none;
}
}
老版本:
/*新版本
多行文本注释
//新版本
单行文本注释
@import "base"
=alert
color:red
background:blue
.alert-warning
+alert
ul
font-size:15px
li
list-style:none
变量
变量的意义
在sass里我们可以定义多个变量来存放颜色、边框等等的样式,这样就可以在下面想要使用样式的时候使用变量了
这样的优点就是便于维护,更改方便
变量的使用
可以通过$来定义变量,在变量名字中可以使用-和_来作为连接,并且-和_是可以互通的,就是用起来一模一样。
变量的值可以是字符串、数字、颜色等等,在变量里还可以使用其他变量,使用的时候直接写变量名就好了
例如
$primary-color:#ff6600;
$primary-border:1px solid $primary_color;
div.box{
background:$primary-color;
}
h1.page-header{
border:$primary-border;
}
css写法---》
div.box {
background: #ff6600;
}
h1.page-header {
border: 1px solid #ff6600;
}
嵌套的使用
合理的使用嵌套语法,可以使我们编写代码更为快捷
假设我们想写这样的css:
.nav {
height: 100px;
}
.nav ul {
margin: 0;
}
.nav ul li {
float: left;
list-style: none;
padding: 5px;
}
在sass里我们可以这样写
.nav{
height:100px;
ul{
margin:0;
li {
float:left;
list-style:none;
padding:5px;
}
}
}
大家会发现,写出来的代码父和子之间都有空格隔开,如果我们需要给a加上伪类的话我们这样写
.nav{
height:100px;
a{
color:#fff;
:hover{
color:#ff6600;
}
}
}
在里面就会出现这样的情况
.nav a :hover {
color: #ff6600;
}
我们发现在a和:hover之间有了空格,这样是不好的,所以我们需要在写的时候在:hover之前把a加上,这样就需要用到在之类里引用父类选择器的方式,我们可以用&符号代替父类
例如:
.nav{
height:100px;
a{
color:#fff;
&:hover{
color:#ff6600;
}
}
}
这样就好了,下面来个完整的代码:
.nav{
height:100px;
ul{
margin:0;
li{
float:left;
list-style:none;
padding:5px;
}
a{
display:block;
color:#000;
&:hover{
color:#f60;
background:red;
}
}
}
& &-text{
font-size:15px;
}
}
css写法-----》
.nav {
height: 100px;
}
.nav ul {
margin: 0;
}
.nav ul li {
float: left;
list-style: none;
padding: 5px;
}
.nav ul a {
display: block;
color: #000;
}
.nav ul a:hover {
color: #f60;
background: red;
}
.nav .nav-text {
font-size: 15px;
}
嵌套属性
我们可以把一些复合属性的子属性来嵌套编写,加快编写速度,例如
body{
font:{
family:Helvitica;
size:15px;
weight:bold;
}
}
.nav{
border:1px solid red{
left:none;
right:none;
}
}
.page-next{
transition:{
property:all;
delay:2s;
}
}
css写法-----》
body {
font-family: Helvitica;
font-size: 15px;
font-weight: bold;
}
.nav {
border: 1px solid red;
border-left: none;
border-right: none;
}
.page-next {
transition-property: all;
transition-delay: 2s;
}
mixin 混合
你可以把它想象成一个有名字的定义好的样式
每一个mixin都有自己的名字,类似于js里的函数定义方法如下
@mixin 名字(参数1,参数2...){
...
}
使用方法是在其他选择器css样式里通过@include引入,其实就相当于将mixin里的代码写入到这个选择器的css里,如下:
@mixin alert {
color:#f60;
background-color:#f60;
a{
color:pink;
}
&-a{
color:red;
}
}
.alert-warning{
@include alert;
}
css写法-----》
.alert-warning {
color: #f60;
background-color: #f60;
}
.alert-warning a {
color: pink;
}
.alert-warning-a {
color: red;
}
刚才是没有参数的mixin,mixin也可以拥有参数,需要注意的是:
- 形参的名字前要加$
- 传参的时候只写值的话要按顺序传
- 传参的时候不想按顺序的话需要加上形参名字
例如:
@mixin alert($color,$background) {
color:$color;
background-color:$background;
a{
color:darken($color,10%);//把颜色加深百分之十
}
}
.alert-warning{
@include alert(red,blue);
}
.alert-info{
@include alert($background:red,$color:blue);
}
css写法------》
.alert-warning {
color: red;
background-color: blue;
}
.alert-warning a {
color: #cc0000;
}
.alert-info {
color: blue;
background-color: red;
}
.alert-info a {
color: #0000cc;
}
继承拓展 extend
如果我们有一个选择器想要拥有另一个选择所有的东西,不管是样式还是子元素等等,可以使用@extend来继承
大家需要注意的是,++b继承a的时候,a的子元素设置了样式,也会给b的子元素设置样式++,达到完全一样的情况,例如:
.alert {
padding:5px;
}
.alert a {
font:{
weight:bold;
size:15px;
}
}
.alert-info {
@extend .alert;
backgournd:skyblue;
}
css写法----》
.alert, .alert-info {
padding: 5px;
}
.alert a, .alert-info a {
font-weight: bold;
font-size: 15px;
}
.alert-info {
backgournd: skyblue;
}
partials
在以前咱们编写css的时候,一个css引入另一个css需要使用@import,其实这是不好的,会多发一次http请求,影响咱们站点的响应速度。
在sass里,咱们可以把小的sass文件分出去,叫做partials,在某个sass里通过@import ‘partials名’去引入,注意路径哟,这样的话就可以把partials里的代码引到咱们大的sass里一起编译
- 需要注意的是 partials的文件名前要加_
_base.scss :
body{
margin:0;
padding:0;
}
style.scss :
@import "base";
.alert {
padding:5px;
}
.alert a {
font:{
weight:bold;
size:15px;
}
}
.alert-info {
@extend .alert;
backgournd:skyblue;
}
css写法----------->
body {
margin: 0;
padding: 0;
}
.alert, .alert-info {
padding: 5px;
}
.alert a, .alert-info a {
font-weight: bold;
font-size: 15px;
}
.alert-info {
backgournd: skyblue;
}
这样的话我们就可以把模块化的思想引入到sass里了
comment注释
sass里的注释有三种
- 多行注释
- 单行注释
- 强制注释
多行注释:压缩后不会出现在css里 /* */
单行注释: 不会出现在css里 //
强制注释:压缩后也会出现在css里 /*! */
sass的基础使用方法就介绍到这里,文章持续更新,后续更新sass高阶用法,关注公众号第一时间阅读。
【项目实战】sass使用基础篇(上)的更多相关文章
- SpringBoot图文教程「概念+案例 思维导图」「基础篇上」
有天上飞的概念,就要有落地的实现 概念+代码实现是本文的特点,教程将涵盖完整的图文教程,代码案例 每个知识点配套自测面试题,学完技术自我测试 本文初学向,所以希望文中所有的代码案例都能敲一遍 大哥大姐 ...
- Sass/Scss 基础篇
Sass/Scss 基础篇 总结Sass学习到的内容 应用Sass/Scss前,环境配置 首先下载Ruby (http://rubyinstaller.org/downloads) 通过命令下载sas ...
- 【转】Shell编程基础篇-上
[转]Shell编程基础篇-上 1.1 前言 1.1.1 为什么学Shell Shell脚本语言是实现Linux/UNIX系统管理及自动化运维所必备的重要工具, Linux/UNIX系统的底层及基础应 ...
- 前端开发工程师 - 03.DOM编程艺术 - 第1章.基础篇(上)
第1章.基础篇(上) Abstract:文档树.节点操作.属性操作.样式操作.事件 DOM (Document Object Model) - 文档对象模型 以对象的方式来表示对应的html,它有一系 ...
- .net 开源模板引擎jntemplate 实战演习:基础篇之入门
一.简介 模板引擎是Web开发中非常重要的一环,它负责将页面上的动态内容呈现出最终的结果展现给前端用户,在asp.net mvc中,我们最熟悉的就是Razor了,作为官方的视图引擎(视图引擎不等同于模 ...
- Redis项目实战---应用及理论(上)---redis基础知识介绍
redis(Remote Dictionary Server) 一.原理及特性层面: 1.优势: 1)数据加载在内存中,执行速度快, 数据结构类似于HashMap,HashM ...
- Sass之一(基础篇)
源码链接:http://pan.baidu.com/s/1o8M51hCSass 学习Sass之前,应该要知道css预处理器这个东西,css预处理器是什么呢? Css预处理器定义了一种新的语言将Css ...
- 新一代分布式实时流处理引擎Flink入门实战之先导理论篇-上
@ 目录 概述 定义 为什么使用Flink 应用行业和场景 应用行业 应用场景 实时数仓演变 Flink VS Spark 架构 系统架构 术语 无界和有界数据 流式分析基础 分层API 运行模式 作 ...
- Shell编程基础篇-上
1.1 前言 1.1.1 为什么学Shell Shell脚本语言是实现Linux/UNIX系统管理及自动化运维所必备的重要工具, Linux/UNIX系统的底层及基础应用软件的核心大都涉及Shell脚 ...
随机推荐
- 找出系统web路径
方法一 :打开web查看源码,复制一个特征字符串,然后替换进下面命令的htmlString搜索之. Win :findstr /s/i/n /d:E:\code\xampp\htdocs\ /c:&q ...
- 为什么阿里、头条、美团这些互联网大厂都在用Spring Boot?
前言 自 2014 年发布至今,Spring Boot 的搜索指数 一路飙升.没错 Spring Boot 越来越火了,作为一名行走一线的 Java 程序员,你可能在各个方面感受到了 Spring B ...
- Python基础点记录1
1 变量:一个变量就是一个单词,只有一个单一的值 1 Python里面的数据类型 interage , floats , booleans , String等 2 Python是一个区分大小写的语言 ...
- Mysql concat() group_concat()用法
数据库表: 关键字:concat 功能:将多个字符串连接成一个字符串 使用:concat(column1, column2,...) 字段中间可以加连字符 结果:连接参数产生的字符串,如果有任何一个 ...
- Redis(一)简介及安装、测试
一.Redis简介: 关于关系型数据库和nosql数据库 关系型数据库是基于关系表的数据库,最终会将数据持久化到磁盘上,而nosql数据 库是基于特殊的结构,并将数据存储到内存的数据库.从性能上而言, ...
- XML--概念、约束、解析
概念 XML:可扩展标记语言 HTML:超文本标记语言 两者的区别: 1.语法结构类似,单语法要求不同 HTML不区分大小写,XML严格区分大小写 在HTML中,有时不严格,如果上下文清楚地显示出段落 ...
- Python JSON的基本使用
Python JSON的基本使用 一.json格式介绍 JSON(JavaScript Object Notation) 通用的数据类型,易于人阅读和编写. 跟字典有些类似,形式也是key-value ...
- 笑谈AlphaGo对战人类从模仿到超越之奥义
起源 故事从一个围棋说起,人类赖以自豪的智慧,为什么这么说,因为据统计,从这19乘19的方格中摆棋,可以有10的340次方的可能,用一个更形象的比拟,全宇宙的原子加起来,也比这个数要小. 也就是说,如 ...
- 利用Python的装饰器一键开启多线程
记录一下自己写的烂代码 import time import threading def WithThread(obj): """这是一个开启线程的装饰器"&q ...
- linux下快速列出局域网中所有主机名(计算机名)的脚本
最近有列出局域网中所有主机名的需求(SMB协议里的),但是findsmb命令总是列不全,搜了搜网上也没什么现成的解决方案,于是自己写了个python脚本 脚本会扫描局域网arp表中所有ip,并尝试解析 ...