Let’s face it, writing css is messy. More so when reviewing the code which other people have written. I find SASS is the answer to that. It helps you to write clean code which is readable.Beginner’s guide to SASS
Let’s face it, writing css is messy. More so when reviewing the code which other people have written. I find SASS is the answer to that. It helps you to write clean code which is readable.
Let’s jump into it. Let’s create a simple HTML which has nested div’s , hover, focus, repeated CSS properties, you know standard HTML we face in daily life.
It is important to understand why are we using classses parent1__link1. It is a part of BEM (Block Element Modifier) methodology where **parent1 **is block and **link1 **is element. BEM follows **simple **rules to name and organise your CSS and gives everyone on a project a declarative syntax which they can use so that they’re on the same page.
You can read about it here
Let’s start with writing css for header. Pretty simple stuff, background-color and color properties.
Here with help of SASS we can change **color codes to variable *so that it can be reused . So, let’s create variables for our color codes (you can use this to come up with names for color variables) using *$ (this is important to create variables in SASS). **Our new css for header would look like this. We can also use variable for many things padding, margins, color basically anything you want to reuse.
To make css even more modular, SASS provides import functionality. We can put all the color names, mixins, common styles in different files and import them. So, let’s create a _color.scss file.
Note the name of** _color.scss** file. This is called a partial file meaning this file contains little snippets of CSS that you can include in other Sass files. The **underscore **lets SASS know that the file is only a partial file and that it should not be generated into a CSS file
And we can import this file in our main scss file. using command
and continue using color variables same way as depicted above.Nesting
Next we jump to **parent1 *(please refer HTML Markup above)*and it’s children.
For the this problem, we will use **& *for concatenation of classes *parent1** and parent1__link1. Please refer to image below (pay attention to use of variables here as well)
For this problem we will concatenate pseudo classes and elements to parent1__link1 **using &**.
Make a note: pseudo classes are concatenated using &: and pseudo elements are concatenated with &::
Comprehensive list of pseudo classes and pseudo link is available here
As described above we have written CSS for parent1. We will write same CSS for parent two as well.
As we can see in above file, parent1 and parent2 share many common css properties. We could make this css cleaner, simpler and more readable using *MIXINS. *Here is how mixin works:
We create a custom common style using @mixin keyword like depicted in image below. It contains all the property that is common to both parent1 and parent2.
Next, we include the mixin in our parent styles.
Here, I have created mixin for both link style and parent style. It makes code much more cleaner and readable.
This is a basic guide to get started with SASS. Of course, SASS provides great variety of functionalities that can be used to make your life easier when writing CSS. You can refer to full guide for SASS here.
Vue CSS frameworks are great for many reasons; code is more universally understood, web applications are easier to maintain, and prototyping becomes less of an extra step.
Vue CSS frameworks are great for many reasons; code is more universally understood, web applications are easier to maintain, and prototyping becomes less of an extra step and more part of the development process.1. Tailwindcss-Vue
Tailwindcss-Vue is a library of UI components for Vue.js built using the Tailwind CSS utility-first CSS framework.@zeit-ui/vue
Vue implementation for Zeit Style, originating from Zeit Design.
@zeit-ui/vue is a Vue implementation for zeit style, originating from Zeit Design. Lean more at GITHUB.
The design of the Zeit is concise and aesthetic feeling, this is an important reason for popular of Zeit. Now you can use them through the @zeit-ui/vue.
Click on the animation to copy it to your clipboardVue Cirrus
A fully responsive and comprehensive CSS framework with beautiful controls and simplistic structure. Cirrus is designed to be adaptable to existing themes or when starting fresh. These are the Vue Components for this CSS framework.Vue CSS Modules
Seamless mapping of class names to CSS modules inside of Vue components.
make a background grid (like graph paper) using only one background gradient property and ended up with this killer mix tape for making all kinds of background grids and patterns.
Download: https://codepen.io/jasesmith/pen/YZEYRL7. CSSOBJ
CSS Rules from JS, change rules dynamically, CSSOM, css modules, auto vendor prefixer, media query for old browsers.
CSS in JS solution, create CSSOM and CSS rules from js, features:
Sass Crash Course- Learn Sass In 20 Minutes: In this mini crash course we are going to learn everything about Sass. What Sass allows us to do is write alot of cool things that we would normally wouldn't be able to do in normal CSS.
With Sass we can create variables, use imports and partials to separate our css code into smaller chunks, we can use mixins to create small functions that allow us to reuse css code, nesting allows us to write children elements directly inside the parent element and much more!
We will also look at a tool called Live Sass Compiler which is going to take our scss code and convert it to regular css with autoprefixer.
If you are interested in learning more about css and sass then take the time to watch this sass crash course covered in 20 minutes!
📕 Things covered in this video:
How to add sass compiler to our project
How to link our sass to html
Partials and Imports
📔 Materials used in this video:
Build and Deploy a Social Network with Sass, Social Network Theme With Sass: Build and deploy a social network with Node.js, Express, React, Redux & MongoDB. Setup Sass, create the landing page with navigation, image overlay, Sass variables, mixins and functions. Create the login and register pages with more utility classes as well as generate some margin and padding classes using Sass logic. Work on the profile list and single profile page and work with CSS grid template areas, flex and more. Add the rest of the pages, finish up the utility classes and make the site responsive with media queriesSocial Network Theme With Sass - Part 1
In this part we will setup Sass, create the landing page with navigation, image overlay, Sass variables, mixins and functionsSocial Network Theme With Sass - Part 2
In this part we will create the login and register pages with more utility classes as well as generate some margin and padding classes using Sass logicSocial Network Theme With Sass - Part 3
In this part we will work on the profile list and single profile page and work with CSS grid template areas, flex and moreSocial Network Theme With Sass - Part 4
In this part we will add the rest of the pages, finish up the utility classes and make the site responsive with media queries