scss基础语法与在datatable项目中的运用
ahua52 opened this issue · comments
什么是sass
SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护
安装
SASS是Ruby语言写的，必须先安装Ruby，然后再安装SASS。安装完Ruby后,执行
gem install sass
使用
SASS文件就是普通的文本文件，里面可以直接使用CSS语法。下面写法，显示.scss文件转化的css代码
sass test.scss
果要将显示结果保存成文件，后面再跟一个.css文件名。
sass test.scss test.css
基础语法
文件后缀名
sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种就是我们这里使用的scss文件,我们项目中采用scss后缀
//文件后缀名为sass的语法
body
background: #eee
font-size:12px
p
background: #0982c1
//文件后缀名为scss的语法
body {
background: #eee;
font-size:12px;
}
p{
background: #0982c1;
}
导入important
编译时会将@import的scss文件合并进来只生成一个CSS文件
@import "reset.css";
@import "a";
p{
background: #0982c1;
}
变量
必须是$开头
普通变量
定义之后可以在全局范围内使用
//sass style
//-------------------------------
$fontSize: 12px;
body{
font-size:$fontSize;
}
//css style
//-------------------------------
body{
font-size:12px;
}
默认变量
仅需要在值后面加上!default即可。
默认变量的价值在进行组件化开发的时候会非常有用
//sass style
//-------------------------------
$baseLineHeight: 1.5 !default;
body{
line-height: $baseLineHeight;
}
//css style
//-------------------------------
body{
line-height:1.5;
}
特殊变量
变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用
//sass style
//-------------------------------
$borderDirection: top !default;
//应用于class和属性
.border-#{$borderDirection}{
border-#{$borderDirection}:1px solid #ccc;
}
//css style
//-------------------------------
.border-top{
border-top:1px solid #ccc;
}
map
map数据以key和value成对出现，其中value又可以是list。格式为：$map: (key1: value1, key2: value2, key3: value3);。可通过map-get($map,$key)取值。
//sass style
//-------------------------------
$headings:（h1:2em,h2:1.5em,h3:1.2em;
@each $header,$size in $headings{
#{$header} {
font-size: $size;
}
}
//css style
//-------------------------------
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}
嵌套Nesting
选择器嵌套
使用&表示父元素选择器
//sass style
//-------------------------------
#top_nav{
line-height: 40px;
a{
display: block;
padding: 0 10px;
color: #fff;
&:hover{
color:#ddd;
}
}
}
//css style
//-------------------------------
#top_nav{
line-height: 40px;
}
#top_nav a{
display: block;
padding: 0 10px;
color: #fff;
}
#top_nav a:hover{
color:#ddd;
}
属性嵌套(不常用)
指有些属性拥有同一个开始单词
如border-width,border-color
//sass style
//-------------------------------
.fakeshadow {
border:{
style:solid;
left:{
width:4px;
color:#888;
}
right:{
width:2px;
color:#ccc;
}
}
}
//css style
//-------------------------------
.fakeshadow{
border-style:solid;
border-left-width:4px;
border-left-color:#888;
border-right-width:2px;
border-right-color:#ccc;
}
@at-root
普通跳出嵌套
//sass style
//-------------------------------
//没有跳出
.parent-1 {
color:#f00;
.child {
width:100px;
}
}
//单个选择器跳出
.parent-2 {
color:#f00;
@at-root .child {
width:200px;
}
}
//多个选择器跳出
.parent-3 {
background:#f00;
@at-root {
.child1 {
width:300px;
}
.child2 {
width:400px;
}
}
}
//css style
//-------------------------------
.parent-1 {
color: #f00;
}
.parent-1 .child {
width: 100px;
}
.parent-2 {
color: #f00;
}
.child {
width: 200px;
}
.parent-3 {
background: #f00;
}
.child1 {
width: 300px;
}
.child2 {
width: 400px;
}
@at-root与&配合使用
//sass style
//-------------------------------
.child{
@at-root .parent &{
color:#f00;
}
}
//css style
//-------------------------------
.parent .child {
color: #f00;
}
混合mixin
@mixin声明混合
无参数mixin
//sass style
//-------------------------------
@mixin center-block{
margin-left:auto;
}
.demo{
@include center-block;
}
//css style
//-------------------------------
.demo{
margin-left:auto;
}
有参数mixin
参数名以$符号开始，`也可设置默认参数
//sass style
//-------------------------------
@mixin opacity($opacity:50){
opacity:$opacity / 100;
filter: alpha(opacity=$opacity);
}
//css style
//-------------------------------
.opacity{
@include opacity; //参数使用默认值
}
.opacity-80{
@include opacity(80); //传递参数
}
继承extend
//sass style
//-------------------------------
h1{
border: 4px solid #ff9aa9;
}
.speaker{
@extend h1;
border-width: 2px;
}
//css style
//-------------------------------
h1,.speaker{
border: 4px solid #ff9aa9;
}
.speaker{
border-width: 2px;
}
占位选择器%
这种选择器的优势：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式。
占位选择器以%标识定义，通过@extend调用
//sass style
//-------------------------------
%ir{
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
#header{
h1{
@extend %ir;
width:300px;
}
}
//css style
//-------------------------------
#header h1{
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
width:300px;
}
函数
常用的为颜色函数，lighten和darken为最。lighten($color,$amount)和darken($color,$amount)
//sass style
//-------------------------------
$baseFontSize: 10px !default;
$gray: #ccc !defualt;
// pixels to rems
@function pxToRem($px) {
@return $px / $baseFontSize * 1rem;
}
body{
font-size:$baseFontSize;
color:lighten($gray,10%);
}
.test{
font-size:pxToRem(16px);
color:darken($gray,10%);
}
//css style
//-------------------------------
body{
font-size:10px;
color:#E6E6E6;
}
.test{
font-size:1.6rem;
color:#B3B3B3;
}
条件判断及循环
@if判断
//sass style
//-------------------------------
$lte7: true;
$type: monster;
.ib{
display:inline-block;
@if $lte7 {
*display:inline;
*zoom:1;
}
}
//css style
//-------------------------------
.ib{
display:inline-block;
*display:inline;
*zoom:1;
}
三目判断
/if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px
for循环
//sass style
//-------------------------------
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
//css style
//-------------------------------
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
.item-3 {
width: 6em;
}
datatable项目sass应用
sass源文件目录datatable\src\ui,项目中scss模块化管理，根据scss功能进行文件化管理
- utility.scss 初始样式
- global.scss 通用全局样式
- minxins.scss 所有的混合放在这里
- variables.scss 变量定义集合
- color.scss 关于色值得变量定义(需配合palette.scss)
- themeColor.scss 定义默认主题色
- u.scss import所有scss
- 功能页面scss 比如tooltip.scss
