sass

我们大家都知道html、css不属于编程语言属于标记语言,所以很难像js一样定义变量、编写方法实现模块化,而目前的css编写模式中都是定义一些公共样式类名,那一块的html需要这个样式,就去增加对应的样式类名,所以我们经常会看到一个标签上存在很多的样式类名,在这种模式中我们需要时常关注css优先级,避免样式的重叠覆盖..

为了解决css的这一困境,css预处理预编译的思想脱颖而出,比较具有代表性的有less,sass,stylus,在传统的css基础上增加了大量的新的语法,编写方式,常用的函数等,可以让css像js一样成为一门编程语言,基于less我们可以把一些经常用到的样式定义成变量或者函数,以后有需要直接调用即可,这样不仅有利于我们的开发速度,也有利于项目的后期维护与可用性

less、sass写完之后不能直接应用到页面当中,我们需要把它编译成css,然后再拿过来使用,我们把它叫做预处理

less、sass的编译有两大类 第一类:基于node环境编译less 第二类:基于浏览器环境

less、sass是一门新的语法,不能被浏览器直接识别,只是方便我们开发用的,最终我们需要把他们编译成正常的css,浏览器识别css

Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言,它诞生于2007年,是最大的成熟的 CSS 预处理语言。最初它是为了配合 HAML(一种缩进式 HTML 预编译器)而设计的,因此有着和 HTML 一样的缩进式风格。

Sass 和 SCSS 有什么区别? 1、文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名 2、语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

sass安装 在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包,大家可以到 Ruby 的官网(http://rubyinstaller.org/downloads)下载对应需要的 Ruby 版本。

当你的电脑中安装好 Ruby 之后,接下来就可以安装 Sass 了。只需要在你的命令终端输入一行命令即可。

1、通过命令安装 Sass 打开电脑的命令终端,输入下面的命令: gem install sass sass -v //查看版本是否安装成功 gem update sass//更新到最新的sass版本 gem uninstall sass//卸载sass(不要点) ws配置路径:program:C:\Ruby23-x64\bin\sass.bat

mixin

@mixin alert($color:blue){
  color: $color;
}
.block{
  margin: 10px;
  padding: 20px;
  @include alert(#fff);
}

扩展继承

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

运算

.a{
  width: 100px+200px;
}

颜色

$color1:red;
.div{
  background: darken($color1,10%);
}
$padding:10px 5px 10px 5px;

.div{
  padding: $padding;
  padding-left: nth($padding,2);
}
$maps:(
    color:red,
    background:blue
);
.div{
   background: map-get($maps,background);
}
@at-root .con{
   //跳出嵌套
}
@function  dobule($cc){
   @return $cc*2;
}
.ccc{
  width: dobule(5px);
}
$aa:8;
.c{
   content: #{$aa};
}
$srceen:800;
@if $srceen  > 900{
   body{
     background: yellow;
   }
}
@else {
   body{
     background: blue;
   }
}
@for $i from 1 to 5{
  .span#{$i}{
     width: 20% * $i;
  }
}
.#{content}{
   background: red;
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏葡萄城控件技术团队

Webpack4教程 - 第二部分,使用loader处理scss,图片以及转换JS

今天继续我们的Webpack 4入门教程。在介绍了Webpack的基本概念之后,是时候更深入一点了。这次我们会涉及Webpack中非常强大的一个东西:loade...

19110
来自专栏前端说吧

html2canvas - 解决办法之图片跨域导致的截图空白

58970
来自专栏陈树义

Wins批处理基本语法

在Windows平台下,批处理可以和Wins系统很好地结合,处理一些简单的任务,比如:重复删除某种类型的文件;开机执行一些特定的命令等。 本文主要介绍批处理的基...

379100
来自专栏小狼的世界

Apache环境下页面乱码的几种可能总结

采用典型的LAMP架构开发的时候,环境中多处涉及到编码的指定,有一个地方忽略,都有可能造成页面汉字乱码的产生,本文将总结这些乱码产生的可能的原因,方便我们排查。

11210
来自专栏Google Dart

AngularDart Material Design 选项树 顶

如果SelectionOptions实现Parent接口,则为Parent.hasChildren设置的每个选项显示一个handle,并且切换handle将从P...

20120
来自专栏前端说吧

html2canvas - 解决办法之图片跨域导致的截图空白

40930
来自专栏技术博文

PHP抓取采集类snoopy

snoopy是一个php类,用来模仿web浏览器的功能,它能完成获取网页内容和发送表单的任务。官方网站 http://snoopy.sourceforge.ne...

80980
来自专栏云飞学编程

python简单应用!用爬虫来采集天猫所有优惠券信息,写入本地文件

随便找一段文字,然后点击右键查看网页源代码,看看是否存在该文字,如果存在,那么这个网页就是静态网站了!很幸运,这个网站居然是静态的。

14220
来自专栏挖坑填坑

angular页面打印局部功能实现方法思考

在页面显示的时候是分页现实的,当前页面只有10条数据,但是打印需要打印完整的100条数据。 并且在当前页面包含了表格之外的标题,菜单等其他元素。 后天api...

12520
来自专栏小白安全

JavaScript危险函数 - HTML操作

1. HTML操作函数简介  当一个方法或操作允许HTML操作,如果有可能控制(甚至部分)参数,则可能在某种程度上操纵HTML,从而获得对用户界面的控制...

48480

扫码关注云+社区

领取腾讯云代金券