Tag:scss

  • The solution of SCSS using mixin not effective (browser can’t compile it)

    Time:2020-4-3

    Mixin method: Browser failed to compile: Previously, the old version of SASS supported the above writing method, but now it is not supported after the new version. The passed in variables must be compiled with {} Browser compilation: The above is the whole content of this article. I hope it will help you in your […]

  • Example code of using SCSS in uni app

    Time:2020-3-21

    Pit encountered I spent the whole afternoon solving the problem of using SCSS in uni app. First of all, I said my problem, I couldn’t use @ mixin when using SCSS, and then Baidu debugged in various ways: Code writing problem (infeasible completely according to the official website): Official Website demo Browser problems (not Firefox). […]

  • Episode 13: implement a set of UI component library of Vue on PC from scratch (scoring component little star)

    Time:2020-3-8

    Episode 13: implement a set of UI component library of Vue on PC from scratch (scoring component little star) 1. Positioning of this episode Speaking of scoring, I first saw that this form was movie website. Each movie got several stars. Later, there was a way for users to manually select stars for scoring. These […]

  • 7 ways to use CSS in react (should be the most comprehensive)

    Time:2020-1-13

    First: use style directly in components There is no need for components to import CSS files from outside and write directly in components. import React, { Component } from “react”; const div1 = { width: “300px”, margin: “30px auto”, BackgroundColor: “ා44014c”, // hump method minHeight: “200px”, boxSizing: “border-box” }; class Test extends Component { constructor(props, […]

  • Front end basics CSS

    Time:2020-1-2

    CSS writing syntax Interior and exterior styles Selector { Style 1; // property: value; width: 300px Style 2; } inline style < div style = “style 1; style 2” > CSS basic selector ID Selector #id{ } Class selector .cls{ } element selector div{ } div.cls{ } The above three basic selectors can be spliced […]

  • Episode 14: implement a set of UI component library (Popover pop-up box) of Vue on PC from scratch

    Time:2019-12-25

    Episode 14: implement a set of UI component library (Popover pop-up box) of Vue on PC from scratch 1. Positioning of this episode Popover component is different from alert, which is a bully president. It is more inclined to assist in displaying some incomplete content. Toast component is more inclined to ‘prompt’ than it is. […]

  • Interviewer: “loading animation of Android system with CSS”

    Time:2019-12-19

    Source code: https://github.com/any86/5a. C ios/android There are two kinds of loading icons commonly used on the web, one is the “Chrysanthemum” of IOS, the other is the “ring” of Android. Today, we use SVG to realize the “ring” animation of Android, and the next lesson realizes the “Chrysanthemum” of IOSBe careful: the reason for the […]

  • CSS operations you may not know form validation

    Time:2019-12-2

    Design sketch principle In the form element, there is apatternAttribute, you can customize regular expressions (such as cell phone number, email address, ID card…);Valid pseudo class, can match throughpatternElements of validation;Invalid pseudo classOn the contrary, it can match the failedpatternSo you can do whatever you like. The above renderings are just for some simple effects, […]

  • CSS is the most simple way to realize the wave dynamic effect, isn’t it?

    Time:2019-11-29

    Fancy canvas implementation is too cumbersome, which is the significance of this paper Design sketch Dismantling First draw a simple box:utilize::beforeAnd::afterDraw two fillet values(radius)Different irregular circles:Parent element settingsoverflow: hiddenFinally addanimationThe animation makes two irregular circles rotate Code html <div class=”wave”></div> scss //Simple box .wave { position: relative; width: 150px; height: 150px; background-color: #5291e0; overflow: hidden; […]

  • To be reasonable, only three lines of rate scoring component of the core CSS code, I was shown to be in a state of numbness by myself

    Time:2019-11-16

    imagerateScoring components are generally usedjavascriptWrite, about a year ago, I wrote an article in Jianshu about the implementation of star scoring component in native JavaScript. If you are interested, you can have a look at it. I wrote it a long time ago, and I don’t know how long the previous code is, so this […]

  • Using repeating linear gradient to realize a ruler

    Time:2019-11-4

    Things like scales are repetitive, when it comes torepeatI thought about itrepeating-linear-gradientYou can tell by nameRepeat linear gradient, which can be implemented more convenientlyInterlacingIf you want to draw a background, it is repeated and interlaced, then it is right to use it; Design sketch principle There are three scalesCentimeter scale、Half centimeter scale、Millimeter scale, then draw […]

  • Episode 15: implementing a PC vue UI component library from scratch (calendar component)

    Time:2019-10-24

    Episode 15: implementing a PC vue UI component library from scratch (calendar component) 1. Location of this episode ‘calendar component is very common in background management system, in the PC display basic is a square table, although a single function, the component or interesting to do it, this I to achieve function contains only the […]