Sass

String replace in Sass

由 ≯℡__Kan透↙ 提交于 2021-02-06 15:09:53
问题 Sass 3.2.1 How to replace in string some part of text? For example, remove from color #fefefe a dash #, to be fefefe. Thanks! 回答1: Here is a function that I just used! SCSS-FUNCTION /// Replace `$search` with `$replace` in `$string` /// @author Hugo Giraudel /// @param {String} $string - Initial string /// @param {String} $search - Substring to replace /// @param {String} $replace ('') - New value /// @return {String} - Updated string @function str-replace($string, $search, $replace: '') {

Import CSS from node_modules using Gulp-SASS

由 不打扰是莪最后的温柔 提交于 2021-02-06 10:43:07
问题 I want to import a CSS-file from my node_modules using SASS. @import 'normalize.css/normalize'; This is how my gulpfile.js handles my SASS: const gulp = require('gulp'), sass = require('gulp-sass'); gulp.task('sass', function () { return gulp.src(['source/assets/css/**.scss', '!source/assets/css/**/_*.[scss|sass']) .pipe(sass()) .pipe(gulp.dest('output/assets/css')); }); SASS compiler will not import the css from node_modules. Instead, this will throw an error. Error: File to import not found

Import CSS from node_modules using Gulp-SASS

由 感情迁移 提交于 2021-02-06 10:42:36
问题 I want to import a CSS-file from my node_modules using SASS. @import 'normalize.css/normalize'; This is how my gulpfile.js handles my SASS: const gulp = require('gulp'), sass = require('gulp-sass'); gulp.task('sass', function () { return gulp.src(['source/assets/css/**.scss', '!source/assets/css/**/_*.[scss|sass']) .pipe(sass()) .pipe(gulp.dest('output/assets/css')); }); SASS compiler will not import the css from node_modules. Instead, this will throw an error. Error: File to import not found

Trig functions in css transform?

由 ☆樱花仙子☆ 提交于 2021-02-05 07:49:06
问题 I'm trying to put some circles around a larger circle at specific angles using transform: translate and cos and sin functions. It doesn't seem to work, and I'm not sure why. .ctr_btn { background-color: red; color: white; display: block; display: relative; border-radius: 50%; width: 4rem; height: 4rem; } .out_btn { background-color: yellowgreen; width: 3rem; height: 3rem; border-radius: 50%; color: black; position: absolute; //this is the part I'm concerned about. transform: translateX(calc

Linux环境安装node以及解决问题

由 我的未来我决定 提交于 2021-02-04 12:50:18
一、环境介绍 系统版本：CentOS Linux 7 (Core) 内核版本：Linux version 4.16.13-1.el7.elrepo.x86_64 node各个版本下载路径 https://nodejs.org/dist/v12.19.0/ node-sass路径 https://github.com/sass/node-sass/tree/release 二、出现问题 Linux下执行npm install 时出现 "cannot run in wd"如何解决? # 将命令 npm install 换为 npm install --unsafe-perm 执行即可 三、安装node.js 1、确认依赖环境 确认服务器有nodejs编译及依赖相关软件，如果没有可通过运行以下命令安装。 yum -y install gcc gcc-c++ openssl-devel 2、下载NodeJS源码包并解压 进入要存放下载资源的目录，本文存放在/usr/local/src/目录下。然后执行命令下载源码包：(若无wget软件，则先下载安装：yum -y install wget) wget http://nodejs.org/dist/v8.11.1/node-v8.11.1-linux-x64.tar.gz 解压 注：如果下载的源码包是.xz的，则需要执行下面命令解压 xz

前端工程化的理解

由 爷，独闯天下 提交于 2021-02-04 10:21:53
很久没写过博客沉淀下，最近看了几篇前端工程化的文章，结合自己实践所学，阐述下什么是前端工程化。 大前端其实分为很多种 移动应用开发的前端 web前端 本篇主要是说下web前端的工程化 什么是前端工程化 在回答前端工程化这个问题之前，我们应该先考虑另外一个问题：前端开发中会不会涉及到业务？再详细一点，就是前端工程师到底需不需要了解服务端的业务逻辑，再或者说，要不要将一部分服务端的业务逻辑放到前端来实现。这个问题没有标准的答案，实际上应该属于工程协作问题，就是谁该干什么的问题。 最早的前端开发就是实现页面，顶多再写写JS让页面可以有交互的特效。 属于前后端未分离的时代。 但是随着需求的增加，我们不仅要做Web应用，还要做App、小程序以及各种端。 前后端分离的时代开始， 在这种需求日增的情况下，必须得考虑一种新的方式，优化前端的开发工作，例如，解决代码冗余，项目可维护性，提升版本迭代速度等等一系列的问题。前端工程化的概念也就是在这中情况下被提出了。 前端工程化的主要目标就是解放生产力、提高生产效率。通过制定一系列的规范，借助工具和框架解决前端开发以及前后端协作过程中的痛点和难度问题。 工程化变表现 一切以提高效率、降低成本、质量保证为目的手段都使工程化 创建：脚手架 编码：代码格式化、编码效率 预览：热更新、Mock、Source Map 代码提交：项目整体检查 部署：自动发布 注意

Vue创建一：创建项目及样式引入

由 自作多情 提交于 2021-02-03 07:20:15
一、基础创建 1、首先安装vue-cli npm install -g vue-cli 2、创建一个使用webpack模板的项目 vue init webpack my-project 3、进入目录 cd my-project 4、安装依赖 npm install 5、启动vue项目 npm run dev 二、项目中安装和引入sass npm install node-sass --save npm install stylus-loader --save 三、全局引入sass文件 scss文件中定义了常量函数等，避免.vue文件每次都@import引入 1、添加依赖： npm install sass-resources-loader -- save- dev npm install sass-loader --save 2、修改build/utils.js： scss: generateLoaders('sass').concat( { loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, '../src/assets/css/rem.scss') } } ) 3、vue文件中设置 <style lang="scss" scoped> .title { font-size

vue 开发常用工具及配置一

由 拜拜、爱过 提交于 2021-01-30 08:10:51
目录 1，NodeJS 2，Vue CLI 3，Vue UI 4，后台接口反向代理 5，vue-devtool s 1，NodeJS 访问 nodejs.org 下载。这是必不可缺的环境之一。 下载最新的 LTS 版本。LTS 代表长期维护，通常比较稳定。 2，Vue CLI vue-cli 是从头搭建 vue 工程的脚手架工具，通过该工具，可以简化工程环境的配置。vue-cli 的官网地址为： cli.vuejs.org/zh/ 。 使用命令安装： npm install -g @vue/cli # OR yarn global add @vue/cli 安装后检查版本： vue -V 最新版本在 3 以上： 3.3.0 安装 VUE CLI 之后，就可以使用create指令创建项目了： vue create hello-world 除了命令行创建，还可以使用 VUE UI 创建。 如上所示，在创建过程中，涉及到这些工程特性： Babel，必选，用于将编写的ES6代码编译成浏览器能识别的JavaScript代码，是核心组件包 Typescript，微软开发的JS的强类型版本，通过Babel能够编译成JavaScript，可选 PWA，Progressive web apps，渐进式Web 应用，一般不选 Router，路由组件，用于页面跳转，多页面程序必选，单页面不选 Vuex

BS4 Reduce Padding Between 2-Up Grid Cards on Mobile

由 独自空忆成欢 提交于 2021-01-29 22:56:25
问题 I have a bootstrap-4 page grid cards. On mobile devices (col), I would like them to display 2 up, but I get twice the padding between the cards than I do on the outside. This is the result of the left and right card padding meeting in between the two cards. Because the number of cards can vary from 1 to 99 I am not sure how to reduce the inner padding to even things out. See image: Green is left and right padding. Gray is the card area. 回答1: try this css to your card element that has padding,

BS4 Reduce Padding Between 2-Up Grid Cards on Mobile

由 南楼画角 提交于 2021-01-29 22:53:45
问题 I have a bootstrap-4 page grid cards. On mobile devices (col), I would like them to display 2 up, but I get twice the padding between the cards than I do on the outside. This is the result of the left and right card padding meeting in between the two cards. Because the number of cards can vary from 1 to 99 I am not sure how to reduce the inner padding to even things out. See image: Green is left and right padding. Gray is the card area. 回答1: try this css to your card element that has padding,
订阅 Sass