Sass 默认样式库
Sass 默认初始化样式库
@charset "utf-8"; // 变量存储
// 字体Unicode编码 微软雅黑:\5FAE\8F6F\96C5\9ED1 , 宋体:\5B8B\4F53
$pcFont: '\5FAE\8F6F\96C5\9ED1', '\5B8B\4F53', arial;
$defaultColor: #333;
$mobileFont: 'Helvetica Neue', Helvetica, STHeiTi, Microsoft YaHei, sans-serif, Microsoft JhengHei, Arial;
$browser: null; %display {
display:inline-block;
*display:inline;
*zoom:;
}
%text-indent {
font-size:;
text-indent:-99999em;
overflow:hidden;
}
%box-sizing {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
}
// 绝对居中
@mixin center($width, $height) {
position: absolute;
left:50%;
top:50%;
width:$width;
height:$height;
margin:(-$height / 2) 0 0 (-$width / 2);
}
// 设置动画名称
@mixin animation($aniName) {
-webkit-animation:$aniName;
-moz-animation:$aniName;
-o-animation:$aniName;
animation:$aniName;
}
// 设置延迟执行时间
@mixin animation-delay($time) {
-webkit-animation-delay:$time;
-moz-animation-delay:$time;
-o-animation-delay:$time;
animation-delay:$time;
}
// 设置阴影
@mixin box-shadow($shadow...) {
-webkit-box-shadow:$shadow;
-moz-box-shadow:$shadow;
-o-box-shadow:$shadow;
box-shadow:$shadow;
}
// 圆角
@mixin border-radius($radius) {
-webkit-border-radius:$radius;
-moz-border-radius:$radius;
-o-border-radius:$radius;
border-radius:$radius;
}
// 设置过渡
@mixin transition($transition...) {
-webkit-transition:$transition;
-moz-transition:$transition;
-o-transition:$transition;
transition:$transition;
}
// 设置旋转位置
@mixin transform-origin($origin...) {
-webkit-transform-origin:$origin;
-moz-transform-origin:$origin;
-o-transform-origin:$origin;
transform-origin:$origin;
}
@mixin transform($transform...) {
-webkit-transform:$transform;
-moz-transform:$transform;
-o-transform:$transform;
transform:$transform;
} // 设置关键帧
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
$browser: '-webkit-'; @content;
}
@-moz-keyframes #{$name} {
$browser: '-moz-'; @content;
}
@-o-keyframes #{$name} {
$browser: '-o-'; @content;
}
@keyframes #{$name} {
$browser: ''; @content;
}
} /* ********************重置样式 reset******************** */ /* *********PC端********** */
body, dl, dd, h1, h2, h3, h4, h5, h6, p, form, figure, figcaption {
margin:0px;
}
ul, ol {
list-style:none;
margin:0px;
padding:0px;
}
body {
font:14px/1.5 $pcFont;
width:100%;
color: $defaultColor;
overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6 {
font-weight:normal;
}
/* 清除点击出现虚拟框 */
a{
outline:none;
text-decoration:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
&:focus{
outline:0;
}
&:link,
&:visited {
color: $defaultColor;
text-decoration:none;
}
}
a img {
border:none;
}
input, textarea, select {
outline:none;
font:12px/1.5 $pcFont;
} /* 清除浮动 */
.clearfix {
*zoom:;
&:after {
display:block;
content:"\200B";
clear:both;
height:;
}
} /* *********移动端********** */
body, dl, dd, h1, h2, h3, h4, h5, h6, p, form, figure, figcaption {
margin:0px;
}
/* 改变盒子模型 */
section, article, nav, aside, footer, header, div, p, ul, li, input, textarea {
display: block;
@extend %box-sizing;
}
html, body {
-webkit-user-select: none;
/* 禁止选中文本 */
user-select: none;
-webkit-text-size-adjust: 100%;
/* iphone禁用文字大小调整 */
-ms-text-size-adjust: 100%;
}
html {
font-size:625%;
}
body{
font:.16rem/1.6 $mobileFont;
color:#333;
-webkit-overflow-scrolling: touch;
}
h1, h2, h3, h4, h5, h6{
font-weight:normal;
}
/* 清除点击虚拟框 */
a, div, p, span, ul, li, i, img, input {
outline:;
text-decoration:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
a:focus{
outline:;
}
a:link,a:visited{
color:$defaultColor;
text-decoration:none;
}
a img{
border:0 none;
}
a, img {
-webkit-touch-callout: none;
/* 禁止长按链接与图片弹出菜单 */
}
input, textarea, select {
outline: none;
color: $defaultColor;
font-family: $mobileFont;
}
input {
/* 清除 iphone 中 input 默认样式 */
-webkit-appearance: none;
}
/* 清除浮动 */
.clearfix {
*zoom:;
&:after {
display:block;
content:"\200B";
clear:both;
height:;
}
}
Sass 默认样式库的更多相关文章
- Bootstrap4默认样式不对胃口?教你使用NPM+Webpack+SASS来定制
Bootstrap 是一个流行的前端样式库,可以方便快速的构建应用,但默认样式可能不尽人意,本文就介绍如何使用 NPM, Webpack, SASS 针对它的源码来定制自己的主题.版本使用的是 Boo ...
- Vue——解决使用第三方组件库时无法修改默认样式的问题(使用 /deep/ )
最近在开发一个基于Vue的后台管理系统,其中使用了element-ui第三方ui组件库.使用过组件库的人都知道,第三方组件往往会有一些默认的样式,而有些又是我们想要改变的. 一.基础(了解 <s ...
- 使用sass语法生成自己的css的样式库
前言 先说一下 sass 和 scss的区别 sass 是一种缩进语法(即没有花括号和分号,只使用换行 缩进的方式去区别子元素,PS:这是我个人的理解) scss 是css-like语法 (它的语法 ...
- css3修改浏览器scroll默认样式
最近公司的新项目.前端样式采用的蚂蚁金服的antDesign. 比较喜欢antDesign.BootStrap一类简约大方的前端样式库. 但是在页面布局上.包括一些选择框.默认的scroll样式简直丑 ...
- 清除浏览器默认样式——css reset & normalize.css
css reset 自己挨个清除很麻烦 可以使用网上一些css库——css reset 把模板复制到css文件最上方,其他的样式我们自己编写来覆盖它们 但是这个也有一些弊端,会把一些本来需要的样式给清 ...
- iOS13适配/黑暗模式的适配/KVC访问私有属性/模态弹窗ViewController 默认样式改变 /LaunchImage即将废弃/蓝牙的权限申请/推送Device Token适配/UIKit 控件变化/StatusBar新增样式
目录 1. KVC访问私有属性 2. 模态弹窗ViewController 默认样式改变 3. 黑暗模式的适配 4. LaunchImage即将废弃 5. 新增一直使用蓝牙的权限申请 6. Sign ...
- 取消chrome浏览器下input和textarea的默认样式;html5默认input内容清除“×”按钮去除办法
取消chrome浏览器下input和textarea的默认样式: outline:none;/*清空chrome中input的外边框*/ html5默认input内容清除“×”按钮去除办法: inpu ...
- [Sass]不同样式风格的输出方法
[Sass]不同样式风格的输出方法 众所周知,每个人编写的 CSS 样式风格都不一样,有的喜欢将所有样式代码都写在同一行,而有的喜欢将样式分行书写.在 Sass 中编译出来的样式风格也可以按不同的样式 ...
- 用纯css改变下拉列表select框的默认样式(不兼容IE10以下)
在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...
随机推荐
- 深入理解Android内存管理原理(六)
一般来说,程序使用内存的方式遵循先向操作系统申请一块内存,使用内存,使用完毕之后释放内存归还给操作系统.然而在传统的C/C++等要求显式释放内存的编程语言中,记得在合适的时候释放内存是一个很有难度的工 ...
- JAVA高级特性 - 注解
注解是插入到代码中用于某种工具处理的标签.这些标签可以在源码层次上进行操作,或者可以处理编译器将其纳入到注解类文件中. 注解不会改变对程序的编译方式.Java编译器会对包含注解和不包含注解的代码生成相 ...
- poj1948
很容易想到dp,f[i,j,k]表示到第i根木棒所组成三条边中两条边长为j,k是否存在 之后找所有满足三角形形成条件的三条边,然后找最大: 但: 如果你朴素的写,很有可能超时,事实上,只要加一些常数优 ...
- KindEditor设置为过滤模式,但在代码模式下提交表单时不过虑HTML标签的解决方法
KindEditor设置filterMode为true,但在代码模式下提交表单的话,发现并没有过虑掉自己不想保留的HTML标签. 这时只需同步内容前加上红色部分内容即可: onClick=" ...
- String中intern的方法
首先查看官方API那个的解释: ——————————————————————————————————————— intern public String intern() 返回字符串对象的规范化表示形 ...
- POJ 1637 Sightseeing tour ★混合图欧拉回路
[题目大意]混合图欧拉回路(1 <= N <= 200, 1 <= M <= 1000) [建模方法] 把该图的无向边随便定向,计算每个点的入度和出度.如果有某个点出入度之差为 ...
- 装饰器模式(Decorator)
转自http://blog.csdn.net/hust_is_lcd/article/details/7884320 1.认识装饰器模式 装饰模式能够实现动态的为对象添加功能,是从一个对象外部来给对象 ...
- jquery 上传空间uploadify使用笔记
基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件. 要求使用jquery1.4或以上版本,flash player 9.0.24以上. 有两个 ...
- FAT32文件系统--For TF卡
1. TF卡空间是如何分配的? 下面以4GB TF卡为例,通过WinHex工具进行分析,其空间分配如下图所示: FAT32把目录当做文件来管理,所以没有独立的目录区,所有的文件目录项都是在数据区里面的 ...
- Ramdisk文件系统的制作与调试运行
开发环境:Fedora 9交叉编译工具链:arm-linux-gcc 4.3.2 with EABI嵌入式Linux内核版本:2.6.29.4-FriendlyARM.昨天写贴子的时候具体记不清了,今 ...