sass基础

TANKING 发布于2019-08-29 11:08 / 3327人阅读

摘要：基础之前在项目中用的最多的就是嵌套省事好多，其他功能没怎么用，今日重拾，想用得漂亮点，所以再去啃啃，当巩固下基础。，记录下自己对的理解。假如两个元素在某些样式上一致，可以用继承。在某个程度上和有点像，定义一段公共函数，再通过调用。

sass基础

之前sass在项目中用的最多的就是嵌套（省事好多），其他功能没怎么用，今日重拾sass，想用得漂亮点，所以再去啃啃sass，当巩固下基础。anyway，记录下自己对sass的理解。

何为sass？

css预处理器。其实还有用的很多的less，stylus。

安装sass

必须先装ruby，再装sass。npm install sass-loader的时候特别久。。你会看到里面一堆的c++的东西。可以试试淘宝的npm镜像会快点。

sass监听

可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。

    sass --watch index.scss:index.css
    
    //watch a folder
    
    sass --watch sassfile:cssfile

sass语法 变量

变量不用多说，就提一点。如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

    $left: left;
    $size: 10px;
    
    div {border-#{$left}-radius: $size;}

嵌套

嵌套按正常父子元素嵌套就够用了，其他属性嵌套可以不用，可读性差。拿出来说的就是hover的时候，使用&引用父元素。原先写css那种hover写法不管用。

   /*元素嵌套*/
   div {
       p {color: #fff;}
       
       &:hover {color: #ffffd;}
   }

   /*属性嵌套*/
   p {
　　　　border: {
　　　　　　color: red;
　　　　}
　　}

继承

这个是我很喜欢的一个功能。假如两个元素在某些样式上一致，可以用继承。

    .sub-title {
      color: #666;
      margin: 0;
      font-family: sans-serif;
      text-align: center;
      font-size: 32px;
      font-weight: bold;
      padding-top: 50px;
    }
    
    p {
        @extend .sub-title;
        background: #fff;
    }
    
    div {
        @extend .sub-title;
        text-shadow: 1px 1px 1px #ccc;
    }

mixin

minxin在某个程度上和extend有点像，定义一段公共函数，再通过@include调用。还有一个常用功能就是用来生成浏览器前缀。

    @mixin radius ($direct, $value) {
      border-#{$direct}-radius: $value;
      -moz-border-#{$direct}-radius: $value;
      -webkit-border-#{$direct}-radius: $value;
    }
    
    p {
      @include radius(top, 10px);
    }

云服务器服务器托管 sass 多云管理 sass sass 混合云部署 iaas paas sass

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111449.html

前端利器：SASS基础与Compass入门

摘要：在吸取了的一些特性基础上，有了大幅改进，也就是现在的。嵌套极大程度上降低了选择器名称和属性的重复书写。选择器嵌套选择器嵌套是指从一个选择器中嵌套子选择器，来实现选择器的继承关系。也已经成为的一个标配组件。 SASS是Syntactically Awesome Stylesheete Sass的缩写，它是css的一个开发工具，提供了很多便利和简单的语法，让css看起来更像是一门...

娣辩孩 2019-08-28 17:54 评论0 收藏0
前端基础工作流：sass自动化编辑成css

摘要：目前提供了观察文件变化，自动将文件编译成的功能。但在有些机子上跟踪编译非常慢。如果想更顺手的完成更复杂的编译，就需要使用工具进行处理。启动提示打开编辑器编辑下文件，保存，查看下文件，已经编译好了。目前sass提供了观察文件变化，自动将sass文件编译成css的功能。但在有些机子上跟踪编译非常慢。使用不便。如果想更顺手的完成更复杂的编译，就需要使用nodejs,gulp 工具进行处理。...

W4n9Hu1 2019-08-30 12:59 评论0 收藏0
大话css预编译处理（三）：基础语法篇

摘要：值得庆幸的是，这三款预处理器语言的语法和语法都差不多。在这一节中，我们依次来对比一下这三款预处理器语言各种特性的异同之处，以及使用方法。预处理器语言支持任何变量例如颜色数值文本。一、Sass、LESS和Stylus的语法每一种语言都有自己一定的语法规则，CSS预处理器语言也不例外，在真正使用CSS预处器语言之前还有一个不可缺少的知识点，就是对语法的理解。值得庆幸的是，这三款CSS预...

刘东 2019-08-30 15:55 评论0 收藏0
sass的学习记录

摘要：核心团队不懈努力，一直使其保持领先地位。自身选择器编译成自身选择器属性嵌套编译为占位符从以后就可以定义占位选择器。将局部变量转换为全局变量可以添加声明编译为默认变量的默认变量仅需要在值后面加上即可。 sass简介 SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。世界上最成熟、最稳定、最强大的专业级CSS扩展语言！兼容C...

xuweijian 2019-08-29 14:21 评论0 收藏0
sass笔记-2|Sass基础语法之让样式表更具条理性和可读性

摘要：这个时候小明如果仅仅引入不想改，那么就是这个值，如果他想改，就可以在任何一处重新声明这个变量，那么就会变成小明的值。这一篇主要详述保持sass条理性和可读性的3个最基本方法——嵌套、导入和注释。零. 变量变量本身的作用是为了保持属性值的可维护性，把所有需要维护的属性值放在同一个地方，快速更改，处处生效，可谓售后无忧。 1.变量声明变量用$符号开头进行声明，任何可以用作CSS属性...

CloudDeveloper 2019-08-30 13:10 评论0 收藏0