Sass学习

最新推荐文章于 2023-01-27 00:06:20 发布

会写代码的哈士奇

最新推荐文章于 2023-01-27 00:06:20 发布

阅读量171

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/yuguqinglei/article/details/97375765

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

环境搭建

安装ruby

下载网址:http://rubyinstaller.org/downloads/

安装sass

gem install sass;

sass -version 查看sass版本；
sass -h 查看sass 所有命令；

sass-convert origin.scss target.css;//转换；

sass input.scss output.css // 转换文件

sass --watch ap/input.scss ap/output //监测单个文件
sass --watch ap/sass:public/stylesheets 监测文件夹；

跟新sass

gem update sass;

安装compass

gem install compass;
compass -v 查看compass版本；

compass create ProjectName;创建compass工程目录；
compass watch 监听sass文件变化，文件改动后，自动生成对应的css文件；

Sass语法学习

Variables

定义变量使用美元符号，引用也需要使用美元;

sass

$family: "Microsoft YaHei","SimSun";
$font_color: white;

body{
    font: normal 14px/24px $family;
    color: $font_color;
}

css

body {
  font: normal 14px/24px "Microsoft YaHei", "SimSun";
  color: white;
}

Nesting

sass 允许以符合HTML相同视觉结构的方式嵌套css选择器。

html

<body>
    <nav>
        <ul>
            <li>
                <a>博雅首页</a>
            </li>
            <li>
                <a>博雅游戏</a>
            </li>
            <li>
                <a>博雅新闻</a>
            </li>
            <li>
                <a>关于我们</a>
            </li>
            <li>
                <a>加入我们</a>
            </li>
        </ul>
    </nav>
</body>

sass

nav{
    ul{
        list-style: none;
    }

    li{
        float: left;
    }

    a{
        display: block;
        width: 100px;
        height: 32px;
        line-height: 32px;
        border: 1px red solid;
        color: black;
        text-decoration: none;
        text-align: center;

    }
}

nav ul {
  list-style: none; }
nav li {
  float: left; }
nav a {
  display: block;
  width: 100px;
  height: 32px;
  line-height: 32px;
  border: 1px red solid;
  color: black;
  text-decoration: none;
  text-align: center; }

备注：

过度嵌套的规则将导致过度合格的css，导致css难以维护。所以，即使是sass可以使用嵌套的原则，也请避免陷入过度嵌套的怪圈，为了代码的可读性；

Partials

为了使css易于维护，模块化、组件化css，可以将css片段或者碎片组成新的sass文件，然后在需要使用它的地方引入。这种文件用下划线开头，如_comment.scss;下划线让sass知道该文件只是一个部分文件，不应该生成css文件，它可以与@import指令一起使用；

Import

css 有一个导入选线，可以将css拆分为更小，更易于维护。但是css文件每次在@import的时候，都会进行一个http请求。Sass构建在但钱css基础上，@import不需要http请求，Sass只是将获取您要导入的文件与当前的文件组合，并且将组合后的文件提供给web流浪器.
_clear.scss
$font-family:"Microsoft YaHei","SimSun";

*{
    margin: 0px;
    padding: 0px;
}
input.sass
@import'clear';

body{
    line-height: 25px;
    font-family: $font-family;
    color: black;
}
output.css
* {
  margin: 0px;
  padding: 0px; }

body {
  line-height: 25px;
  font-family: "Microsoft YaHei", "SimSun";
  color: black;
}

Mixins

mixin的中文意思为混合。mixin允许您创建要在整个站点中重用的css声明组，同时，mixin甚至允许传入值以使您 mixin更灵活。一个良好的用途是在浏览器兼容性上应对多供应商前缀。
sass
@mixin translate($property) {
  -webkit-transform: $property;
  transform: $property;
  -ms-transform: $property;
}

body{
  line-height: 25px;
  font-family: $font-family;
  color: black;
  @include translate(rotage(30deg))
}
css
body {
  line-height: 25px;
  font-family: "Microsoft YaHei", "SimSun";
  color: black;
  -webkit-transform: rotage(30deg);
  transform: rotage(30deg);
  -ms-transform: rotage(30deg);
}

Extend/Inheritance

@extend允许从一个选择器中共享一组css属性到另一组选择器；

sass

// this will print, because be extend;
%message_shared{
   border: 1px solid red;
   font: normal 12px/24px "Microsoft YaHei","SimSun";
}

// this will not print ,because not be extend;
%message_null{
   display: flex;
   flex: wrap;
}


.message{
   @extend %message_shared;
}

.success{
   @extend %message_shared;
   border-color: antiquewhite;
}

.error{
   @extend %message_shared;
   border-color: black;
}

.warning{
   @extend %message_shared;
   border-collapse: yellow;
}

css

.message, .success, .error, .warning {
 border: 1px solid red;
 font: normal 12px/24px "Microsoft YaHei","SimSun"; }

.success {
 border-color: antiquewhite; }

.error {
 border-color: black; }

.warning {
 border-collapse: yellow; }

备注：

定义被继承选择器使用% name{ propertity：value}格式，在编译后的文件中，没有被使用、被继承的对象不会出现在文件中；

Operators

sass 拥有标准的数学计算符，可以使用 +、-、*、/、%等数学运算；
sass
body{
    width: 350/1080*100%;
    height: 450/1920*100%;
}
css
body {
  width: 32.4074074074%;
  height: 23.4375%; }

关于复用的比较

方式	定义方式	引用方式	优点
Import	外部文件用_fileName.scss命名	@import’fileName’	外部文件可以定义变量；引入不需要进行http请求；
mixin	@minxin name（$porpety）{}	@include name(portety)	组件复用，可以传参，起到函数租用；
extend	%name{}	@extend %name；	继承所有属性到当前选择器；

会写代码的哈士奇

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Sass学习

环境搭建安装ruby下载网址:http://rubyinstaller.org/downloads/安装sassgem install sass;sass -version 查看sass版本；sass -h 查看sass 所有命令；sass-convert origin.scss target.css;//转换；sass input.scss output.css...
复制链接

扫一扫