scss transition @mixin 动态

2024-08-23

sass中mixin常用的CSS3

圆角border-radius @mixin rounded($radius){ -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } 盒模型阴影box-shadow 下面是一个使用多参数的例子:用CSS3创建一个阴影的mixin,需要传递水平和垂的偏移量,模糊的范围,还有颜色,4个参数: @mixin shadow($x, $y, $blur, $color){ -w

动态样式语言Sass&Less介绍与区别

一. Sass/Scss&Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,语法跟css一样(但多了些功能),比css好写,而且更容易阅读.Sass语法类似与Haml,属于缩排语法(makeup),用意就是为了快速写Html和Css. Less一种动态样式语言. 将CSS赋予了动态语言的特性,如变量,继承,运算, 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可一在服务端运行 (

scss 侧边栏_图片

html <!doctype html><html lang="zh-CN"><head> <meta charset="UTF-8" /> <title>侧边栏</title> <link rel="stylesheet" href="css/style.css"></head><body> <div class

vue(v-html)和scss的使用问题

<div class="lyric-container" v-html="temp"></div> <style lang="scss" scoped> .lyric-container{ position: absolute; top: 0; left: 0; padding-top: 1.25rem; p {//这个规则不会应用 font-size: 0.

详解scss的继承、占位符和混合宏

1.继承和占位符两者都是通过@extend来引用. 1.1 继承一个已经存在的css样式类,可以被其他样式类继承. 例如,实现以下css样式: .btn, .btn--primary, .btn--info { border: 1px solid blue; } .btn--primary { color: black; } .btn--info { color: gray; } scss中可以这样写,显然,这种写法便于维护和阅读! .btn { border: 1px solid blue

Scss基础用法

Scss基础用法一.注释用法: (1)//comment:该注释只是在.scss源文件中有,编译后的css文件中没有. (2)/! /:重要注释,任何style的css文件中都会有,一般放置css文件版权说明等信息. (3)/ /:该注释在compressed的style的css中没有,其他style的css文件都会含有. 二.变量: 1.一般以$开头,有作用域限制 $color: red; .div{ background-color: $color; } 2.若子选择器中定义的变量想成为全

页面布局整理（基于scss）

页面开发步骤: 1.全局reset.设置基础背景色.设置基础字体样式 2.全局布局页面结构,meta 标签引入 3.按钮等相同的样式,用scss提前写好一份公用,渐变等 border-radius box-shadow ,水平垂直居中 4.兼容的样式,提前写好scss,统一引用 5.盒子模型,怪异型(border-box)和标准型(content-box) 6.移动端如果需要识别二维码全局reset.设置基础背景色.设置基础字体样式统一reset // 方案一: *{ margin: 0;

scss-null在@mixin传参中的应用

可以给混合器声明参数,以便灵活的配置相关属性值,看如下scss代码: @mixin antzone-div($color, $font-size) { color:$color; font-size:$font-size; } div{ @include antzone-div(blue,16px); } 上面的混合器具有两个参数,在调用混合器的时候,必须要传递两个参数,否则会报错.实际应用中,可能并非需要传递每一个参数,这个时候只要给参数设置一个默认值即可.scss代码实例如下: @mixin

Sass和Scss

Sass:https://www.sass.hk/ Sass是什么 Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables).嵌套 (nested rules).混合 (mixins).导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅.使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目. Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言,

css揭秘--笔记（未完）

第0章关于本书 1, 本书要用到一个工具函数————$$(),它可以让我们更容易获取和遍历所有匹配特定css选择符的dom元素: function $$(selector,context){ context=context||document; var elements=context.querySelectorAll(selector); return Array.prototype.slice.call(elements); } 2, 以下实现一个效果: linear-gradient(#

Sass进阶之路,之二(进阶篇)

Sass之二(进阶篇) 1. 数据类型 1.1 Number 数字类型,小数类型,带有像素单位的数字类型,全部都属于Number类型 Number类型详情请点击这里,下面是小例子 1.$n1: 1.2;2.$n2: 12;3.$n3: 14px;4.$n4: 1em; 1.2 String 不加双引号的,加双引号的,加单引号的全部都属于String类型 String类型详细内容请点击这里, 下面是小demo 1.$s1: container;2.$s2: 'container';3.$s3: "

sass的语法及其用法

1.sass语法 1.1 css的编译模式 css --- 普通 sass / scss --- 高效 // ********* less --- 高效 1.2 sass介绍来源: ruby语言基础的版本,后缀名为sass:没有{},只能通过缩进来实现 -- 可读性差.难以维护 // css .box {width: 100px} // .sass .box width: 100px; // 据说是这样 .scss 后缀 --- 可读性高.便于维护 html { background: re

我是如何用 CSS 绘制各种形状的

自适应的椭圆 1.自适应的椭圆实现方式是通过border-radius这个属性:border-radius它可以单独指定水平和垂直半径.用 / 分隔这两个值.并且该属性的值不仅可以接受长度值,还能接收百分比的值.百分比的值会基于元素的尺寸进行解析,宽是水平半径的解析,高是垂直半径的解析. 所以可以把两个半径的值都设置成50%: border-radius: % / %; /* 值都是50% 就可以简化成 border-radius: 50%; */ 最终的效果: 2.半椭圆的实现 border

vue 实现滑块验证码

图一为拖拽前效果,图二为拖拽后效果一.新建文件JcRange.vue,代码如下: 1.模板代码: <template> <div class="jc-component__range"> <div class="jc-range" :class="rangeStatus?'success':''" > <i @mousedown="rangeMove" :class="ra

css预处理语言的模块化实践

编写css是前端工作中,一项普通而又频繁的劳动,由于css并不是一门语言,所以在程序设计上显得有些简陋.对于小型项目来说,css的量还不至于庞大,问题没有凸显,而如果要开发和持续维护一个较为大型的项目,那就需要对css进行管理和规范了,否则会发生不可挽回的后果(吓唬谁呢??). 背景上一节[从css谈模块化]我们通过规范的约束,将css的编写方式进行了优化和改进,形成一种可持续发展的路线.但还是遗留了一些问题:冗余.虽然我们通过定义公共模块和私有模块,来委婉地分担common的体积,但commo

什么是DCI

目录备注什么是DCI?如何将Role注入到Data中?开发期注入字节码增强MixinTraitTemplateT4 + 部分类 + 显式接口实现 + 扩展类型,C#专用运行期注入Mixin动态代理为什么要用DCI?DCI在C#种的两种实现第一种:显式接口实现 + 部分类第二种实现:组合备注备注返回目录之前把DCI的Role和四色原型的Role给弄混了,本文也不会比较这两种Role的区别(后面有机会再说),这里简单的记录一下对DCI的理解. 参考文章:http://www.cnblogs.c

vue.js移动端app实战1：初始配置

本系列将会用vue.js2制作一个移动端的webapp单页面,页面不多,大概在7,8个左右,不过麻雀虽小,五脏俱全,常用的效果如轮播图,下拉刷新,上拉加载,图片懒加载都会用到.css方面也会有一些描述,像不同分辨率的适配,flex布局以及scss来编写mixin来处理2x,3x图等. 初始工作: 通过vue-cli安装webpack模板后,会自动生成一大堆文件,通常我们只关心src/目录下的东西. 个人习惯在src下新建一个base目录,用来存放通用的css及js,比如样式重置css,一切js工

UDK Stat命令

Stat命令(chs en)提供了游戏和引擎各个方面的实时统计信息,输入不同参数会在屏幕HUD上显示对应统计数据. 非Shipping版的UDK才会启用STATS宏,统计逻辑才会编译进exe,才能使用Stat命令相关的功能 Stat用到的数据结构在UnStats.h和UnStats.cpp中,fps数据收集通过全局变量FFPSCounter GFPSCounter,其他统计数据通过全局变量FStatManager GStatManager Stat命令的HUD绘制逻辑在UnStatsRende

vue 学习小记

vue 中有 data() .computed.methods.beforeRouteLeave.created等具体的: data():定义一些文件中需要用到的变量,data中带return,是使数据只在当前组件中可用,不会影响其他组件,不使用return,会让数据在全局可见,会造成污染 computed():用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理, 它其实就是定义一些需要通过各种计算处

CSS斜切角

问题斜切角在Web设计和印刷中是相当受欢迎的样式.它通常是在一个或多个元素的角落切一个45°的角(也就是所谓的斜切角).特别是最近,扁平化设计的势头压过了拟真设计,也使这种效果更加流行.当斜切角只存在元素的一侧,并且每个都占据元素的50%高度的时候,一个箭头的形状产生了,这在按钮和面包屑导航中非常受欢迎. 图注:带斜切角的按钮,创建了箭头形状强调其意义但是,要用CSS来创建这个效果并不是那么容易,这不是一行代码就可以搞定的效果.这导致很多作者倾向于直接使用背景图像完成,而不是结合三角形来完成

h5做列表水平分割

移动端H5各种各样的列表的制作方法(三) by FungLeo 移动端H5各种各样的列表的制作方法(三) by FungLeo 前情回顾在上一篇博文<移动端各种各样的列表的制作方法(二)>中,我们再通过两个DEMO,演示了一下在移动端H5中更多需求的列表制作.不过,看起来,好像还是蛮简单的.这一章,接着深入. 如果你是先看到的这篇文章,建议您先去上面的链接,把对应的内容给看一下,这样上下文连贯,更容易理解本文的内容. 带小图标的列表上面两章,我们做了一些普通的列表.而在移动端H5中,我们经

scss transition @mixin 动态

热门专题