01、Sass基础

其他 2020-04-03 23:34:15 阅读次数: 0

什么是Sass？

Sass是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。

安装Sass过程

一、安装Ruby（Windows）

Ruby + Devkit 2.6.5-1（x64）地址： https://github.com/oneclick/rubyinstaller2/releases/download/RubyInstaller-2.6.5-1/rubyinstaller-devkit-2.6.5-1-x64.exe

 安装时除了更改路径外，其他都可以按照默认选项进行，直到安装完成的那个页面，把最后的勾去掉，如：

cmd进入控制台进行配置

//查看是否安装成功
ruby -v

//如安装成功会打印
ruby 2.6.5p114 (2019-10-01 revision 67812) [x64-mingw32]

//尽可能更新RubyGems版本
gem update --system //该命令请翻墙一下

//更新后查看RubyGems版本
gem -v
//gem版本号
3.0.3  

//删除替换原gem源
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
//打印是否替换成功
gem sources -l
//确保只有 gems.ruby-china.com
https://gems.ruby-china.com

 二、安装Sass

//Sass安装
gem install sass

//安装完之后查看版本，以确保安装成功
sass -v

//Sass常用命令
gem update sass  //更新sass
sass -v     //查看sass版本
sass -h     //查看sass帮助

三、安装Compass

// compass 是一个 sass 的库，compass 里面有很多封装好的 mixin ，有了它，我们就可以很快的写出完美的，兼容的样式。

//安装compass
gem install compass

//安装完之后查看版本，以确保安装成功
compass -v

四、编译sass的方法

Subline Text插件：SASS-Build

VS Code插件：Live Sass Compiler

编译软件Koala：https://www.sass.hk/skill/koala-app.html

Sass基本语法

//变量名以$开头
$width:300px;
$height:300px;

//在写属性值的时候可以引用变量
div{
    width: $width;
    height: $height;
}

//变量名相同，最后的会覆盖之前的
$color:black;
$color:purple;

//!default表示默认的属性值
$position:static !default;

字符串变量及拼接

//变量可以是字符串
$str:'xxx.jpg';
$class:'.div';
//某些字符串可以不加引号
$string:abcdefg;

//引用字符串
.div{
    background-image: url('./img/'+$str);
}
//插值变量的方法引用字符串( #{} )
.div{
    background-image: url('./img/#{$str}');
}
#{$class} {
    color: $color;
}

变量作用域

//全局作用域。在{}外面写，每个地方都可以引用
$width:100px;
.div{
    width: $width;
}
.bb{
    height: $width;
}

//局部作用域,{}内部定义只能内部使用
.div{
    $color:red;
    color: $color;
}
.bb{
    color: $color; //这样会报错，除非全局有$color
}

@import不需要编译

//在sass文件中用@import，不会编译引入文件的情况（四种）

@import 'aa.css';   //以.css结尾
@import 'http://www.qmlqmlqml.shop/bbc.scss'    //以http://开头，无论文件是scss还是css都不会编译
@import 'url(bbc.css)';     //文件名是url()
//还有一种，@import 里面包含 media queries 的情况

@import需要编译，推荐的引入方式

//引入的文件名以 _ 开头，文件扩展名 .scss/.sass ，如：
_demo.scss
//这样的好处就是，保存的时候不会单独地生成.css的文件，以koala软件为例

//引入时，去掉 _ 和扩展名，如：
@import 'demo';

注意：不可以同时存在添加下划线 与 未添加下划线的 同名文件，添加下划线的文件将会被忽略

Sass基本数据类型

number类型

$zoomValue = 3;
.div{
    zoom:$zoomValue;
}

color类型

$color:red;
$colour:#fe3232;
.div{
    background-color:$color;
}

string类型

$str:'asdff.png'
.div{
    background-image:url('../shanghai/'+$str);
}

list类型（数组）

$list:(3,'ab',#fe3232,100px);
.div{
    color: nth($list,3);  //获取数组下标为3的元素，下标从1开始，不是0
    zoom:index($list,'ab'); //数组从头开始查找字符串'ab'，返回下标数字
}

map类型（对象）

$map:(position:absolute,top:3px,right:3px,bottom:5px,left:5px);
.div{
    position:map-get($map,position); //用map-get方法，获取$map里面的position属性
    top:map-get($map,top);
    left:map-get($map,left);
}
//map类型的循环遍历
.div{
    @each $key,$value in $map{
        #{$key} : #{$value};    
    }
}

算术运算

变量

.div{
    $num1:100px;
    $num2:200px;
    //加
    width: $num1 + $num2;
    //减
    height:$num2 - $num1;
    //乘，这里变量只能乘数字，两个变量相乘会报错
    margin:$num1*3;
    //除，这里只能乘数字
    border:$num2/25;
}

非变量

.div{
    //加
    width: (10px+3);
    //减
    height: (10px-4);
    //乘
    margin: (8px*4);
    //除
    border: (8px/2);
    //注：非变量的加减乘除要在()里面，几个数之间只需要一个带单位即可
}

颜色运算

.div{
   $color1:#fe0325;
   $color2:#c8f9l3;
   
   //两个16进制的数值相加（即将淘汰）
   color: $color1 + $color2; 
   
   //两种颜色混合
   colour:mix($color1,$color2);

   
   color: red($color1);//获取$color1的红色素
   
   color: green($color1);//获取$color1的绿色素
   
   color: blue($color1);//获取$color1的蓝色素
   
   //输出结果与$color1的值相同
   color: rgb(red($color1),green($color1),blue($color1));
}

字符串运算（介绍string类型时说过）

$str:'asdff.png'
.div{
    background-image:url('../shanghai/'+$str);
}

一般的mixin（混合宏）

//定义时：@mixin 名字 {}  ，里面可以放各种样式
@mixin hello{
    display: block;
    font: {
        size: 20px;
　　　　　weight:500;
    };
    color:blue;
}

.div{
    //引入时：@include 名字
    @include hello;
}

嵌套的mixin

@mixin hello{
    display: block;
    font-size: 20px;;
    color:blue;
}
@mixin hi{
    name:hello;
    age:18;
    @include hello;  //这里尾部，引入hello代码块
}
.div{
    cursor: pointer;
    @include hi;    //这里引入hi代码块
    font-family: "agency fb";
}

带参数的mixin

@mixin seeyou($name,$age){  //这里可以用,隔开，接收多个参数
    name:$name;
    age:$age;
    border: 88px;
}
.div{
    @include seeyou('zhangsan',18); //这里调用mixin的时候要给实参
}

Sass继承

简单继承

.div1{
    color: red;
}
.div2{
    @extend .div1;  //继承：@extend 需要继承选择器的名字
    background-color: blue;
}

关联属性继承 

.div1{
    color: red;
}
.div1.other{
    background-color: blue;
}
.dd{
    @extend .div1; //不单单继承div1，选择器中包含div1的也继承
}

 

链式继承 

.div1{
    color: red;
}
.div2{
    background-color: blue;
    @extend .div1;  //继承了div1
}
.dd{
    cursor: pointer;
    @extend .div2;  //不仅继承div2，div2里面继承了div1，所以div1跟div2都继承了
}

伪类继承

a:hover{
    background-color: red;
}
.div{
    @extend :hover; //继承了a的伪类
    color: black;
}

Sass嵌套

一般嵌套.

div > .inner > .cc

.div{
    color: cyan;
    font-size: 30px;
    .inner{    //div里面的inner
        position: relative;
        top: 20px;
        left: 10px;
        .cc{    //div里面的inner里面的cc
            width: 200px;
        }
    }
}

特殊嵌套

一般以横杠分离的属性都可以嵌套，如：background-color、background-clip，可把color、clip嵌套到background里面去

.div{
    background:{
        image:url('../haha.jpg');   //表示background-image
        clip: border-box;       //表示background-clip
    };
    font:{
        size: 30px;     //表示font-size
        family:'abc';   //表示font-family
    };
}

Sass条件控制语句

if else 语句

// {}里面可以用
$name:'zhangsan';
.div{
    @if $name == 'lisi'{
        color: red;
    }@else if $name == 'xiaoming'{
        color: orange;
    }@else{
        color: purple;
    }
}
//注意if else 语句前面记得加@，判断语句不需要括号
//{}外面也能使用
@if $name == '123'{
    .div{
        position: absolute;
    }
}@else{
    .bb{
        height: 30px;
    }
}

for语句

@for $i from 1 through 5{   //循环1-5次，包含第5次，实际5次
    .cc#{$i}{
        color: blue;
    }
}
@for $i from 1 to 5{    //循环1-5次，不包含第5次，实际4次
    .aa#{$i}{
        color: blue;
    }
}

for遍历list

$list:(1,2,3,4,5);
@for $i from 1 through length($list){    //遍历一般用through，length($list)表示$list的数组长度
    .div#{$i} {
        width: 100px;
    }
}

while语句

$i:1;
@while $i<5 {   //符合条件才能进入循环
    .div#{$i} {
        color: white;
    }
    $i:$i+1;    //记得要对循环数做操作，不然报错死循环
}

each遍历map

$map:(top:10px,right:10px,bottom:5px,left:7px); //记得map是用()的
.div{
    @each $key,$value in $map {     //$key表示键，$value表示值
        #{$key}:$value;   //将键值对循环输出
    }
}

 

猜你喜欢

转载自www.cnblogs.com/mingliangge/p/12620167.html
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022