Sass

Export variables from SASS to vanilla CSS?

由 十年热恋 提交于 2021-02-10 12:26:11
问题 Consider I have a long list of SASS variables in different .scss files like this: $app-color-white: #ffffff; $app-color-black: #000000; What would be the most effective way to export these variables as vanilla CSS variables? :root { --app-color-white: #ffffff; --app-color-black: #000000; } Maybe, there is a SASS-way or even some pre-processor? I want my SASS framework to be also used in vanilla CSS projects. 回答1: I think the best way to do this would be using something like a variable map; E

移动端 rem适配方法

由 瘦欲@ 提交于 2021-02-10 08:52:23
　　　　　　　　　　　　　　　　　　　　rem适配 一, 网易适配方法 屏幕宽度/设计稿rem宽度=页面动态font-size值 (function(doc, win) { var docEl = doc.documentElement; resizeEvt = ' orientationchange ' in window ? ' orientationchange ' : ' resize ' ; recalc = function() { var clientWidth = docEl.clientWidth > 750 ? 750 : docEl.clientWidth; if (!clientWidth) return ; docEl.style.fontSize = clientWidth / 7.5 + ' px ' ; }; if (!doc.addEventListener) return ; win.addEventListener(resizeEvt, recalc, false ); doc.addEventListener( ' DOMContentLoaded ' , recalc, false ); })(document, window); 　　 解释: 这样就设置好了每个页面的根fonts-size，因为rem单位是基于根font-size

Bootstrap 4 SCSS compilation: Error: Invalid US-ASCII character “\xE2”

由 别等时光非礼了梦想. 提交于 2021-02-10 06:39:07
问题 Having issues compiling some bootstrap 4 modules (updating from beta3). While the issue can be solved by setting @charset: 'UTF-8'; on _hover.scss mixin partial (which is noted as deprecated within the file), why would that be needed considering it should compile out of the box as previous beta versions. Code in _hover.scss : @mixin hover { &:hover { @content; } } @mixin hover-focus { &:hover, &:focus { @content; } } @mixin plain-hover-focus { &, &:hover, &:focus { @content; } } @mixin hover

「前端工程化」该怎么理解？

由 自作多情 提交于 2021-02-09 13:40:10
关注「 前端向后 」微信公众号，你将收获一系列「用 心 原创」的高质量技术文章，主题包括但不限于前端、Node.js以及服务端技术 一.什么是前端工程？ 一个类似的术语是软件工程（Software Engineering）： Software engineering is the systematic application of engineering approaches to the development of software. 将工程方法系统化地应用到软件开发中，就叫软件工程 。那么，紧接着又有两个问题： 工程方法是什么？ 系统化怎么理解？ 工程是指使用科学原理设计和制造机器、结构等，比如修桥、铺路、建隧道、造车、盖房子： Engineering is the use of scientific principles to design and build machines, structures, and other items, including bridges, tunnels, roads, vehicles, and buildings. 具体到软件领域，指的是 以系统、严谨、可量化的方法开发、运营、维护软件 ，软件工程包括对这些方法的应用和研究： Software engineering the application of a systematic,

Chrome DevTools

由 点点圈 提交于 2021-02-09 07:55:47
Chrome DevTools 小技巧 1.表格视图 console.table(arr2/obj, [arrColName]); // 以列表形式显示对象属性/值或者多维数组键/值 2.计时 console.time/timeEnd(str); // 成对出现，配合使用 3.snippet 可以把自己的调试工具库放进去，非常方便 4.图片取色 用浏览器打开图片，审查元素，设置任意色值，用取色器取色 5.常用快捷键 Ctrl + Shift + f 跨文件查找 Ctrl + Shift + o 查找函数定义 Ctrl + p 转到Sources面板 Ctrl + Shift + c 审查元素 Ctrl + L 跳转到指定行 ESC 显示/不显示console Ctrl + L 清空console 零.主面板 1.常用功能 模拟设备（横屏切换），模拟触摸事件（默认开启） 2.不常用功能 模拟网络（移动网络性能优化），模拟经纬度、加速度，调试媒体查询 二.Elements 1.常用功能 定位，临时修改，查看css规则，事件监听 2.不常用功能 DOM断点 （插入断点，子树更新/属性值更新/节点移除时触发，对应DOM3级节点更新事件），拖放节点修改DOM结构， 强制元素显示hover/active等状态 三.Network 1.网络面板能做什么 哪个资源最晚开始下载？

Using SCSS with angular library created using angular-cli

由 蓝咒 提交于 2021-02-09 07:00:23
问题 I have created an angular library project where I want to use SCSS for styles. So I have configured ng config schematics.@schematics/angular:component.styleext scss and this made an entry to angular.json file "schematics": { "@schematics/angular:component": { "styleext": "scss" } } Now I am using materialize-css UI library in my library components. And it requires to import its SCSS file. I am not seeing styles.scss file where I can import this and my components and other common styles? I

Button without background with rotating gradient border

由 ╄→尐↘猪︶ㄣ 提交于 2021-02-08 15:12:44
问题 What I'm trying to achieve is a button like Once it's done I need to animate on hover. The closest example I could find is this codepen https://codepen.io/Chester/pen/QPoyjN The problem is the ::after that is required to apply a white background on the button The size of the button might change based on the text length so a solution like the one given here is not valid : Rotate only the Border using CSS Here's what I got so far, the goal is to keep a similar animation but remove the white

Sass - Mixins which create dynamic property and its valuse

由 。_饼干妹妹 提交于 2021-02-08 14:09:21
问题 I'm trying to create a dynamic css property using SASS by using mixins. @mixin setProperty($property,$value,$unit:null){ #{$property} :$value$unit; } .class{ @include setProperty(position,relative); } This creates an output .class { position: relative; } I'm fine with this. But when i create some property for margin or padding we should include PX . So i tried something like this .class{ @include setProperty(margin,10,px); } which creates output with a space in the middle as follows. How do i

Sass - Mixins which create dynamic property and its valuse

由 女生的网名这么多〃 提交于 2021-02-08 14:09:10
问题 I'm trying to create a dynamic css property using SASS by using mixins. @mixin setProperty($property,$value,$unit:null){ #{$property} :$value$unit; } .class{ @include setProperty(position,relative); } This creates an output .class { position: relative; } I'm fine with this. But when i create some property for margin or padding we should include PX . So i tried something like this .class{ @include setProperty(margin,10,px); } which creates output with a space in the middle as follows. How do i

Sass - Mixins which create dynamic property and its valuse

由 对着背影说爱祢 提交于 2021-02-08 14:08:54
问题 I'm trying to create a dynamic css property using SASS by using mixins. @mixin setProperty($property,$value,$unit:null){ #{$property} :$value$unit; } .class{ @include setProperty(position,relative); } This creates an output .class { position: relative; } I'm fine with this. But when i create some property for margin or padding we should include PX . So i tried something like this .class{ @include setProperty(margin,10,px); } which creates output with a space in the middle as follows. How do i
订阅 Sass