专栏首页知道一点点sass入门学习篇(二)

sass入门学习篇(二)

从语法开始但是语法也不是一两句的事情,首先看基本的导入,使用

一,sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号;另一种就是我们这里使用的scss文件,建议scss.

二,导入

使用@import导入但是和css导入有点区别。

比如基础的文件命名:_mixin.scss导入的时候可以省略下划线写成:@import "mixin"

三,注释

sass有两种注释方式,一种是标准的css注释方式/* */

另一种则是//双斜杆形式的单行注释,

注意:不过这种单行注释不会被转译出来。

四,变量,必须是以$开头,!default表示默认值,sass是没有局部变量的

1,普通变量

$f:12px;

body{font-size:$f;}

2,默认变量

$f:12px !default;
body{
  font-size:$f;
}

3,覆盖默认变量

$f:12px !default;
$f:14px;
body{
    font-size:$f;
}

  结果font-size:14px;

4,特殊变量:两种情况,一是作属性,二是作值。都以#{$name}的形式

作属性:
$direction:top !default;

.border-#{$direction}{
    border-#{$direction}:1px solid #ccc;
}
做值:
$f:12px !default;
$s:1.5 !default;
body{
   font:#{$f}/#{$s};        
}

  作值这里有 点不明白,不能直接写成font:$f/$s;这样吗?

5,多值变量,有两种:list类型和map类型,简单来说list类型有点像js中的数组,而map类型有点像js中的对象。

list:可用nth($var,$index)取值如:length($f,$s)

    一维:$px:5px 1px 2px 3px;

    二维:$px:(5px 1px),(2px 3px);

eg: 
$linkColor:#222 #333 !default;

a{
     color:nth($linkColor,1);
    &:hover{color:nth($linkColor,2);}
}    

  map:map数据以key和value成对出现,其中value又可以是list。

可通过map-get($map,$key)取值

格式:$map:(key1:val1,key2:val2);

   map-m($map1,$map2),map-key($map),map-values($map)

eg:

定义:
$heading:(h1:2em,h2:1em,h3:3em);
使用:
@each $header, $size in $headingss{
     #{$header}{
    font-size:$size;     
}
}

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 实现文字底部居中

    用户3055976
  • CSS3 基础知识[转载minsong的博客]

    CSS3 基础知识 1.边框     1.1 圆角  border-radius:5px 0 0 5px;     1.2 阴影  box-shadow:2px...

    用户3055976
  • 移动端兼容适配js+css全局样式

    用户3055976
  • 带新手玩转MVC——不讲道理就是干(上)

    前言:这几天更新了几篇博客,都是关于Servlet、JSP的理解,后来又写了两种Web开发模式,发现阅读量还可以,说明JSP还是受关注的,之前有朋友评论说JSP...

    泰斗贤若如
  • golang学习之beego框架配合easyui实现增删改查及图片上传

    demo目录: ? upload文件夹主要放置上传的头像文件,main是主文件,所有效果如下: 主页面: ? 具体代码: <!DOCTYPE html> <ht...

    用户1141560
  • CSS3 转换(Transform)

    在CSS中,允许元素实现 2D 和 3D的转换效果,主要包含 :旋转,缩放,移动,倾斜        

    py3study
  • 微信小程序-margin和padding的区别

    为了方便,先看一个图,外面的是margin,是外边距,padding是内边距。

    叉叉敌
  • JQuery实现聊天对话框

    skylark
  • css3 过渡和2d变换——回顾

    1.transition   语法:transition: property duration timing-function delay;       tr...

    用户1197315
  • 【CSS】599- 9个很棒的CSS边框技巧

    如果您是前端开发人员,那么几乎每天都会使用CSS边框。我发现了一些可以在您的项目中使用的有用的技巧。

    pingan8787

扫码关注云+社区

领取腾讯云代金券