Skip to content

Instantly share code, notes, and snippets.

@jintangWang

jintangWang/_base.scss

Last active February 27, 2017 08:35
Show Gist options
  • Save jintangWang/15b7175268946b9cef21d94625180ee7 to your computer and use it in GitHub Desktop.
Save jintangWang/15b7175268946b9cef21d94625180ee7 to your computer and use it in GitHub Desktop.
Download ZIP
base.scss(附sass开发规范)
Raw
_base.scss
@import "_variables";
//公共的minix开始-------------------------------------------------------------------------------------------
@mixin size($width:null,$height:null){
@if($width){width:$width;}
@if($height){height:$height;}
}
@mixin clearfix{
&:before,&:after{
display: table;
content: '';
}
&:after{
clear: both;
}
}
@mixin horizontalCenter($width){
position: absolute;
left: 50%;
width: $width;
margin-left: -$width/2;
}
@mixin absuCenter($width,$height){
position: absolute;
top: 50%;
left: 50%;
width: $width;
height: $height;
margin-left: -$width/2;
margin-top: -$height/2;
}
@mixin textOverflow{
white-space: nowrap;
text-overflow: ellipsis;
overflow:hidden;
}
//为兼容不同浏览器的minix---------------------------------------------------
@mixin opacity($opacity){
$filter:$opacity * 100;
opacity: $opacity;
filter: alpha(opacity=$filter);
}
@mixin calcWidth($width){
width:-moz-calc(#{$width});
width:-webkit-calc(#{$width});
width:calc(#{$width});
}
@mixin border-radius($raidus){
-webkit-border-radius: $raidus;
-moz-border-radius: $raidus;
border-radius: $raidus;
}
@mixin box-shadow($shadow...){
-moz-box-shadow:$shadow;
-webkit-box-shadow:$shadow;
-o-box-shadow: $shadow;
box-shadow:$shadow;
}
@mixin box-sizing($sizing){
-webkit-box-sizing: $sizing;
-moz-box-sizing: $sizing;
box-sizing:$sizing;
}
@mixin text-shadow($shadow...){//此属性可放置多个参数
-webkit-text-shadow: $shadow;
-moz-text-shadow: $shadow;
text-shadow: $shadow;
}
@function getMozClip($clip){
$clipArr:border-box padding-box content-box text;
$mozClipArr:border padding content-box text;
$index:index($clipArr, $clip);
@return nth($mozClipArr,$index);
}
@mixin background-clip($clip){
-moz-background-clip: getMozClip($clip);//moz3.6-:border || padding
-webkit-background-clip: $clip;
background-clip: $clip;
}
@mixin user-select($select){
-moz-user-select:$select;
-webkit-user-select:$select;
-o-user-select:$select;
-ms-user-select:$select;
-khtml-user-select: $select;
user-select:$select;
}
@mixin transition($transition){
-webkit-transition:$transition;
-moz-transition:$transition;
-o-transition:$transition;
-ms-transition:$transition;
transition:$transition;
}
@mixin transform($transform){
-webkit-transform: $transform;
-moz-transform: $transform;
-o-transform: $transform;
-ms-transform: $transform;
transform:$transform;
}
@mixin animation($animation){
-webkit-animation: $animation;
-moz-animation: $animation;
-o-animation: $animation;
animation: $animation;
}
@function getDirection($origin){
$direction:error;
@if type_of($origin)==string{
@if $origin==top{
$direction:(direcStart:50% 0%,direcEnd:50% 100%,toDirec:to bottom);
}@else if $origin==right{
$direction:(direcStart:100% 50%,direcEnd:0% 50%,toDirec:to left);
}@else if $origin==bottom{
$direction:(direcStart:50% 100%,direcEnd:50% 0%,toDirec:to top);
}@else if $origin==left{
$direction:(direcStart:0% 50%,direcEnd:100% 50%,toDirec:to right);
}
}@else if type_of($origin)==list{//带空格的参数类型是list
@if index($origin,left) and index($origin,top){
$direction:(direcStart:0% 0%,direcEnd:100% 100%,toDirec:to right bottom);
}@else if index($origin,left) and index($origin,bottom){
$direction:(direcStart:0% 100%,direcEnd:100% 0%,toDirec:to right top);
}@else if index($origin,right) and index($origin,top){
$direction:(direcStart:100% 0%,direcEnd:0% 100%,toDirec:to left bottom);
}@else if index($origin,right) and index($origin,bottom){
$direction:(direcStart:100% 100%,direcEnd:0% 0%,toDirec:to left top);
}
}@else if type_of($origin)==number{
//角度时无法计算-webkit-gradient的(x1,y1)与(x2,y2),直接设为默认的方向
@if $origin<180{
$direction:(direcStart:50% 0%,direcEnd:50% 100%,toDirec:$origin+180);
}@else {
$direction:(direcStart:50% 0%,direcEnd:50% 100%,toDirec:$origin-180);
}
}
@return $direction;
}
//只支持两种颜色范围的渐变
@mixin linear-gradient($origin, $start, $stop){
$opposite:getDirection($origin);
background-color: mix($start,$stop);
background-image: -webkit-linear-gradient($origin, $start, $stop);
background-image: -webkit-gradient(linear, map-get($opposite,direcStart), map-get($opposite,direcEnd), from($start), to($stop));
background-image: -moz-linear-gradient($origin, $start, $stop);
background-image: -o-linear-gradient($origin, $start, $stop);
background-image: -ms-linear-gradient($origin, $start, $stop);
background-image: linear-gradient(map-get($opposite,toDirec), $start, $stop);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$start}, endColorstr=#{$stop}, GradientType=0);
}
//只支持单opacity属性的：0%、10%、20%...100%
@mixin keyframes-opacity($name){
@-webkit-keyframes #{$name} {@include frames-opacity();}
@-moz-keyframes #{$name} {@include frames-opacity();}
@-o-keyframes #{$name} {@include frames-opacity();}
@keyframes #{$name} {@include frames-opacity();}
}
@mixin frames-opacity(){
$i:0;
@while $i <= 1{
$indicate:percentage($i);
#{$indicate} {
opacity: $i;
$i:$i + 0.1;
}
}
}
//支持多属性的0%和100%
@mixin keyframes($name,$props,$starts,$ends){
@-webkit-keyframes #{$name} {@include frames($props,$starts,$ends);}
@-moz-keyframes #{$name} {@include frames($props,$starts,$ends);}
@-o-keyframes #{$name} {@include frames($props,$starts,$ends);}
@keyframes #{$name} {@include frames($props,$starts,$ends);}
}
@mixin frames($props,$starts,$ends){
$length:length($props);
0% {
@for $i from 1 through $length{
$prop:nth($props,$i);
#{$prop}:nth($starts,$i);
}
}
100%{
@for $j from 1 through $length{
$prop:nth($props,$j);
#{$prop}:nth($ends,$j);
}
}
}
//复合样式的minix-------------------------------------------------------------
@mixin margin($top:null,$right:null,$bottom:null,$left:null){
@if $top{margin-top: $top;}
@if $right{margin-right: $right;}
@if $bottom{margin-bottom: $bottom;}
@if $left{margin-left: $left;}
}
@mixin padding($top:null,$right:null,$bottom:null,$left:null){
@if $top{padding-top: $top;}
@if $right{padding-right: $right;}
@if $bottom{padding-bottom: $bottom;}
@if $left{padding-left: $left;}
}
@mixin border($top:null,$right:null,$bottom:null,$left:null){
@if $top{border-top: $top;}
@if $right{border-right: $right;}
@if $bottom{border-bottom: $bottom;}
@if $left{border-left: $left;}
}
@mixin borderRadius($top-left:null,$top-right:null,$bottom-left:null,$bottom-right:null){
@if $top-left{border-top-left-radius:$top-left;}
@if $top-right{border-top-right-radius:$top-right;}
@if $bottom-left{border-bottom-left-radius:$bottom-left;}
@if $bottom-right{border-bottom-right-radius:$bottom-right;}
}
@mixin borderColor($top-color:null,$right-color:null,$bottom-color:null,$left-color:null){
@if $top-color{border-top-color:$top-color;}
@if $right-color{border-right-color:$right-color;}
@if $bottom-color{border-bottom-color:$bottom-color;}
@if $left-color{border-left-color:$left-color;}
}
@mixin position($position,$top:null,$right:null,$bottom:null,$left:null,$z-index:null){
position: $position;
@if $top{top: $top;}
@if $right{right: $right;}
@if $bottom{bottom: $bottom;}
@if $left{left: $left;}
@if $z-index{z-index: $z-index;}
}
//公共的minix结束-------------------------------------------------------------------------------------------
Raw
_variables.scss
@charset "utf-8";
$font-family:"宋体",Arial,sans-serif;
$font-size:12px;
//颜色开始:
//1.带color的表示主色或作用较多的颜色，sub表示辅色
//2.后缀由a、b排序的颜色表面由浅入深
//3.渐变色的后缀是start与end
//表示状态的颜色组----------------------------------------------
$success:#25ae3a;
$success-light:#ccffdd;
$success-deep:#1e9d63;
$warn:#ed9f37;
$warn-light:#ffffcc;
$warn-deep:#ff6600;
$danger:#f55043;
$danger-light:#ffd3d3;
$danger-deep:#f00;
$dark:#000;
$dark-light:#222;
//被取代的颜色：若替换后的颜色效果不好，请用自定义函数mixlighten()和mixdarken()处理基本色得到
//1.主要用的蓝色：#3872f0 用$Blue-color-blue替换
//2.字体用的深蓝色:#415571、#333、#444 都用$theme-font-deep替换
//3.border用的浅灰色：#d8dde2、#DDE0E6等都用$theme-border替换
//4.不欠不深的灰色：#ddd、#AEAEAE用$theme-sub-a:#ccc替换
//蓝色主题相关颜色
$theme-color:#1D89E4;//此主题的主色
$theme-sub-a:#ccc;//此主题辅色:灰色
$theme-sub-b:#fff;//此主题辅色:白色
//蓝色对应的浅色和深色，类似于$danger-light、$danger-deep
$theme-color-light:#d7ecfb;//此浅色常用作背景色
$theme-color-deep:#006edb;
//蓝色的一对渐变色
$theme-color-start:#4aa1e9;
$theme-color-end :#0f79d5;
//白色的一对渐变色
$theme-sub-start :#F5F5F5;
$theme-sub-end :#EEEEEE;
//主题字体相关
$theme-font:#3a91ef;
$theme-font-hover:#59b1fb;//字体hover颜色
$theme-font-deep:#3f4a69;
$theme-font-sub:#666;
//主题边框
$theme-border:#e4e4e4;
//主题背景
$theme-bg:#f9f9f9;
//白色有浅入深有这么几种颜色：$theme-sub-b:#fff < $theme-bg:#f9f9f9 < $theme-sub-start :#F5F5F5 < $theme-sub-end :#EEEEEE
//所以对于白色渐变色背景与hover时的渐变色背景可以这样:
//正常状态下：@include linear-gradient(top, $theme-sub-start, $theme-sub-end);
//hover时： @include linear-gradient(top, $theme-sub-b, $theme-bg);
//蓝色有浅入深有这么几种颜色：$theme-font-hover:#59b1fb < $theme-font:#3a91ef < $theme-color:#1D89E4 < $theme-color-start:#1E89E5 < $theme-color-end :#0f79d5
Raw
使用规范之Sass.md

一、不同主题的颜色字体等变量定义规范：

假设有一蓝色主题，且起名为"Blue"。那么：

  • 其下的所有变量都以"Blue"为开头起名
  • 变量名应包含主要特征和用途,若用途较多用"color"声明
  • 对于一些动作变化效果，如hover的颜色效果，最后再跟上对应的动作名

实例：

$Blue-color-blue:#1D89E4;//用途较多,是此主题的主色
$Blue-border-lightgray-a:#e4e4e4;//常用作border
$Blue-border-lightgray-b:#dddddd;
$Blue-bg-lightgray:#f9f9f9;//常作背景色
$Blue-font-blue-hover:#0f79d5;//常作字体颜色,当hover时字体为这个颜色

这样，就定义了一套主题的颜色。下面的语句决定我们使用的主题：

$theme-color:$Blue-color-blue;
$theme-border-a:$Blue-border-lightgray-a;
$theme-border-b:$Blue-border-lightgray-b;
$theme-bg:$Blue-bg-lightgray;
$theme-font-hover:$Blue-font-blue-hover;

这里定义的变量才是实际在项目中用的，这些名称只包含了主要作用，而不包含特征。要切换不同的主题，只需要该这些变量对应的值就可以了。

二、跟主题无关的颜色字体等变量定义规范：

和跟主题相关的颜色名称定义类似，只不过开头不用加主题名，使用的时候可以明显区分主题相关的颜色和不相关的颜色。

  • 用途较多的颜色：不用声明作用，只需用单词表明特征即可
  • 一些有常规用途的颜色：声明主要作用和特征

这个比较灵活，具体视情况而定。
实例：

$white:#fff;
$font-red:#f00;

三、兼容不同浏览器的样式mixin

其名称与样式的名称一致：
实例1：

@mixin border-radius($raidus){
  -webkit-border-radius: $raidus;
  -moz-border-radius: $raidus;
  border-radius: $raidus;
}

实例2：

//只支持单opacity属性的：0%、10%、20%...100%
@mixin keyframes-a($name){
  @-webkit-keyframes #{$name} {@include frames-a();}
  @-moz-keyframes #{$name} {@include frames-a();}
  @-o-keyframes #{$name} {@include frames-a();}
  @keyframes #{$name} {@include frames-a();}
}
@mixin frames-a(){
  $i:0;
  @while $i <= 1{
    $indicate:percentage($i);
    #{$indicate} {
      opacity: $i;
      $i:$i + 0.1;
    }
  }
}
//支持多属性的0%和100%
@mixin keyframes-b($name,$props,$starts,$ends){
  @-webkit-keyframes #{$name} {@include frames-b($props,$starts,$ends);}
  @-moz-keyframes #{$name} {@include frames-b($props,$starts,$ends);}
  @-o-keyframes #{$name} {@include frames-b($props,$starts,$ends);}
  @keyframes #{$name} {@include frames-b($props,$starts,$ends);}
}
@mixin frames-b($props,$starts,$ends){
  $length:length($props);
  0% {
    @for $i from 1 through $length{
      $prop:nth($props,$i);
      #{$prop}:nth($starts,$i);
    }
  }
  100%{
    @for $j from 1 through $length{
      $prop:nth($props,$j);
      #{$prop}:nth($ends,$j);
    }
  }
}

四、常用的mixin

实例：

@mixin clearfix{
  &:before,&:after,{
    display: table;
    content: '';
  }
  &:after{
    clear: both;
  }
}

五、复合样式mixin:

为了区分兼容不同浏览器的mixin，这个采用"驼峰命名法".
实例：

@mixin position($position,$top:null,$right:null,$bottom:null,$left:null,$z-index:null){
  position: $position;
  @if $top{top: $top;}
  @if $right{right: $right;}
  @if $bottom{bottom: $bottom;}
  @if $left{left: $left;}
  @if $z-index{z-index: $z-index;}
}

可以只传部分参数，生成的css而不会添加多余属性.
他们默认的排序都是：上右下左。
如果只传部分参数，实例如下：

//要编译成这样的css
  position: absolute;
  right: 0;
  bottom: 0;
//调用方法：
//方法1,最后一个"有效参数"前面的参数设为null，后面的不用管，因为参数默认值就是null
@include position(absolute,null,0,0);
//方法2,指定参数名称
@include position(absolute,$right:0,$bottom:0);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment