sass 的使用心得

//定义颜色
$c55:#555;
$c22:#222;
$c33:#333;
$c99:#999;
$c77:#777;
$c00:#000;
$cff:#fff;
$caa:#aaa;
$ccc:#ccc;
$cf0:#f0f0f0;
$cdd:#ddd;
$cee:#eee;
$cf9:#f9f9f9;
$cf7:#F7F7F7;
$cfa:#fafafa;
$cf60:#FF8225;
$c2a:#2a3542;
$c35:#35404d;
$c1d:#1DA1F2;
$cff0:#ff0000;
$c02:#02c12a;
$cf4:#f4f4f4;
$cbbe:#bbe3fb;
$cde :#dedede;

// 背景图片地址和大小
@mixin bjs($url) {
  background-image: url($url);
  background-repeat: no-repeat;
  background-size: 350px 250px;
}
//定义magin
@mixin setMargin($left, $right, $bottom,$top){
  margin:$top $right $bottom $left;
}
//定义padding
@mixin setPadding($left, $right, $bottom,$top){
  padding:$top $right $bottom $left;
}
//居中
@mixin  jz {
  position:absolute;
  left:0;
  bottom:0;
  margin:0;
  padding:0;
}

//定义圆角
@mixin borderRadius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  -o-border-radius: $radius;
  border-radius: $radius;
}
//定位全屏
@mixin allcover{
  position:absolute;
  top:0;
  right:0;
}

//定位上下左右居中
@mixin center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

//定位上下居中
@mixin ct {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

//定位上下居中
@mixin cl {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

//宽高
@mixin wh($width, $height){
  width: $width;
  height: $height;
}
@mixin center($width,$height){
  width: $width;
  height: $height;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -($height) / 2;
  margin-left: -($width) / 2;
}
//字体大小、行高、字体
@mixin font($size, $line-height, $family: ‘Microsoft YaHei‘) {
  font: #{$size}/#{$line-height} $family;
}

//字体大小,颜色
@mixin sc($size, $color){
  font-size: $size;
  color: $color;
}

//flex 布局和 子元素 对其方式
@mixin fj($type: space-between){
  display: flex;
  justify-content: $type;

}
@mixin ns{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@mixin hlh($s1) {
  height: $s1;
  line-height: $s1;
  overflow: hidden;
}
@mixin thl($s2,$s3){
  height:$s2;
  line-height: $s3;
  text-align: center;
}

// one line text for ...
@mixin oneline($s1) {
  overflow: hidden;
  line-height: $s1;
  height: $s1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

// move
@mixin yd($s1:0,$s2:0){
  -webkit-transform:translate($s1,$s2);
  transform:translate($s1,$s2);
}

// zoom
@mixin fd($s1:1.2){
  -webkit-transform:scale($s1);
  transform:scale($s1);
}

// rotate
@mixin xz($deg:360){
  -webkit-transform:rotate($deg+deg);
  transform:rotate($deg+deg);
}

// for link
@mixin dz($time:0.25s){
  -webkit-transition: all $time ease-in-out;
  transition: all $time ease-in-out;
}
//同时设置magin padding
$properties: (margin, padding);
@mixin set-value($side, $value) {
  @each $prop in $properties {
    #{$prop}-#{$side}: $value;
  }
}
//设置magin 和 padding
@mixin set-mp($prop,$side, $value) {
    #{$prop}-#{$side}: $value;
}

%mt5 {
  margin-top: 5px;
}
%mt10 {
  margin-top: 10px;
}
%mt15 {
  margin-top: 15px;
}
%pt5{
  padding-top: 5px;
}
%pl10{
  padding-left:10px;
}
时间: 2024-11-05 18:49:17

sass 的使用心得的相关文章

less与SASS学习心得

在以往学习CSS和HTML的过程中其实还是比较简单的.因为HTML和css基本上没有逻辑推理,做一步显一步,所以做出来思路非常清晰.但是局限性也非常的大,那就是CSS本身是不具备变量计算判断循环这些功能的.而在实际编码过程中我们又需要简化工程量而不可避免的使用到这些功能.所以less和SASS便孕育而生.less和SASS是对现有的CSS的扩展.这两种都使css拥有了上述中没有的功能.CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML 一道,被广泛应用于万维网(World Wide W

sass个人学习笔记

Materliu 在慕课的视频: http://www.imooc.com/learn/364 . http://www.imooc.com/wiki/371 sass入门:http://www.w3cplus.com/sassguide/ 个人先看了 <Sass与Compass实战>(Materliu 是中文翻译之一)后看的视频,看书的时候不是很了解看了视频之后又看了一遍书终于少许了解sass了 下面是我个人对<Sass与Compass实战>这本书学习笔记总结,有些是个人极端自我

Sass初使用

看慕课网materliu前辈的sass教程,http://www.imooc.com/learn/364.顺便把刚做完的项目重构一下,然后把一些笔记和心得都写在这里~ 首先安装sass,这里直接参考 大漠前辈的安装教程 http://www.w3cplus.com/sassguide/install.html. 然后安装compass, 在ruby command 里面打命令,gem install compass 就好了:就现阶段来说,对compass理解的不是很多,看完sass那个视频之后就

gulp教程(sass,livereload,md5,css压缩,js压缩,img的base64)

环境 node -v  v6.10.3 npm -v  3.10.10 package.json如下: { "name": "zhcsdata", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": &

LSEE和SASS的区别

/Less中的注释,但这种不会被编译/* * 这也是Less中的注释,但是会被编译 *  * [Less中的变量] *  * 1.声明变量:@变量名:变量值: *   使用变量:@变量名 *  *  >>>Less中变量的类型: *  ①数字类         ①10px   ②字符串:无引号字符串 red        有引号字符串   "haha" *  ②颜色类red  #000000   rgb()    ③值列表类型:用逗号或空格分割     10px so

sass语法基础知识

文件后缀名 sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号:另一种就是我们这里使用的scss文件,这种和我们平时写的css文件格式差不多,使用大括号和分号.而本教程中所说的所有sass文件都指后缀名为scss的文件.在此也建议使用后缀名为scss的文件,以避免sass后缀名的严格格式要求报错. //文件后缀名为sass的语法 body background: #eee font-size:12px p background: #0982c1 //文件后缀名为scss的语法 b

Delphi组件indy 10中IdTCPServer修正及SSL使用心得

indy 10终于随着Delphi2005发布了,不过indy套件在我的印象中总是复杂并且BUG不断,说实话,不是看在他一整套组件的面子上,我还是喜欢VCL原生的Socket组件,简洁,清晰.Indy9发展到了indy10几乎完全不兼容,可叹啊.言归正传.在使用IdTCPServer组件的时候发现了他的漏洞,他的OnConnec,OnExecute,OnDisconnect等事件是在其他线程中执行的,通常情况下这没有问题,但是在特殊的情况下会造成问题,如果其他部分的程序写得有问题就会出现漏洞.

sass学习笔记(五):sass的运算

(一).加法 加法运算是 Sass 中运算中的一种,在变量或属性中都可以做加法运算.如: .box {   width: 20px + 8in; } 编译出来的 CSS: .box {   width: 788px; } 但对于携带不同类型的单位时,在 Sass 中计算会报错,如下例所示: .box {   width: 20px + 1em; } 编译的时候,编译器会报错:"Incompatible units: 'em' and 'px'." (二).减法 Sass 的减法运算和加

10天精通Sass 之 处理字符串与数字的函数

Sass的函数简介 Sass中自备了一系列的功能函数,包括: - 字符串函数 - 数字函数 - 列表函数 - 颜色函数 - Introspection函数 - 三元函数 除了Sass中已提供的函数,我们还可以根据自己的需求定义函数,称为自定义函数. 字符串函数 * unquote($string) * :删除字符串中的引号 * quote($string) * :给字符串加引号 unquote()函数 用来删除字符串的引号,如果这个字符串没有引号,则返回原始字符串. .test1 { conte