DEV Community

Cover image for 20+ Ultimate CSS Tricks and SASS Shorthands for code efficiency
Dev Write Ups
Dev Write Ups

Posted on • Originally published at devwriteups.com

20+ Ultimate CSS Tricks and SASS Shorthands for code efficiency

CSS may look exhausting, and not very many individuals can dominate it the correct way. So in this post we've written about 20+ CSS tricks and tips you should know also SASS mixins shorthand you should know. Notwithstanding, it is an expertise that can give you an incredible upper hand over different designers. On the off chance that you like addressing puzzles, you will discover bliss recorded as a hard copy CSS by viewing at it as a riddle to settle.

Let's look into some amazing CSS tricks 🤩.


Smooth Scrolling

When you visit some websites and try to got to different sections, it scrolls smoothly to that section. You can achieve this feature on your website by using one line CSS.

html {
   scroll-behavior: smooth;  
}
Enter fullscreen mode Exit fullscreen mode

Prevent <textarea> resize

You can use the resize property to prevent <textarea> element form being resized (or limit it to one axis).

textarea.no-resize {
  resize: none;
}

textarea.horizontal-resize {
  resize: horizontal;
}

textarea.vertical-resize {
  resize: vertical;
}
Enter fullscreen mode Exit fullscreen mode

Drop cap

You can add a drop cap to a paragraph by using the ::first-letter pseudo element.

::first-letter {
  font-size: 250%;
}
Enter fullscreen mode Exit fullscreen mode

Input range pseudo-classes

The lesser-known :in-range and :out-of-range pseudo-classes can help you validate an <input> element by its min and max properties.

input:in-range{
  background: rgba(255, 0, 0, 0.6);
}

input:out-of-range {
  background: rgba(255, 0, 0, 0.2);
}
Enter fullscreen mode Exit fullscreen mode

Thank you For Reading🤩 Subscribe to our newsletter , we send it occasionally with amazing news, resources and many thing.


Useful CSS Pseudo elements selectors

Pseudo elements are a way to select and style a specific part of an element. You can think of them as a sub-element that are created as part of standard HTML elements.

How is it different pseudo class?

A pseudo class is used to select an element in a specific state(like hover or focus). A pseudo element is used to select a specific part of an element (like first-letter).

Pseudo element selectors begin with two colons(::) as a way to differentiate them from pseudo classes. This was only introduced in CSS3, therefore some selectors are backwards compatible and work with a single color(:).

::before and ::after

Creates a pseudo-element that is the child of the selected element. The ::before pseudo element is assigned as the first child and ::after is the last.

.main-text{
  font-style: italic; 
 }

.main-text::before, 
.main-text::after {
  content:  ' " ' ;
  color: wheat; 
}

/*SUPPORTED IN ALL MODERN BROWSERS*/
Enter fullscreen mode Exit fullscreen mode

::first-line

Applies styles of the first line of a block-level element. Keep in mind that the length of the first line will depend on the width of the element or viewport.

p::first-line {
   color: wheat;
   text-decoration: underline;  
 }
Enter fullscreen mode Exit fullscreen mode

::placeholder

Represents the placeholder text in an <input> and <textarea> element. Only a subset of CSS properties can be used with the pseudo element.

input::placeholder {
  color: wheat;
  font-size: 1.2em;
  font-style: italic;
 }
Enter fullscreen mode Exit fullscreen mode

::selection

Applies styles to the part of a document that has been highlighted by the user. Can be applied globally or to specific elements only.

::selection {
  color: #ffffff;
  background-color: #fa5094;
}

/*Only apply to selected text withing a paragraph element*/

p::selection {
  color: lightblue;
  background-color: #wheat;
}
Enter fullscreen mode Exit fullscreen mode

CSS Short-hands for properties

CSS Short-hands properties allow you to set the values of multiple CSS properties simultaneously. They are useful to know as they make your code more concise and easier to read.

Edge properties

Properties related to edges of the elements box model (e.g margin or padding) follow 1 to 4 syntax .

  • [1 values syntax]Same value on all 4 edges
padding: 1rem;
Enter fullscreen mode Exit fullscreen mode
  • [2 values syntax]First value for top and bottom and second value for left and right
padding: 1rem 2rem;
Enter fullscreen mode Exit fullscreen mode
  • [3 values syntax]First value for top. Second value for left and right. Third value for bottom
padding: 1rem 2rem 3rem;
Enter fullscreen mode Exit fullscreen mode
  • [4 values syntax]Separate value for each edge in clockwise order - top, right, bottom, left.
padding: 1rem 2rem 3rem 4rem; 
Enter fullscreen mode Exit fullscreen mode

Corner properties

Similarly, properties related to the corners of an elements box model (eg: borde-radius) also follow a 1-to-4 value syntax.

  • [1 values syntax]Same value on all 4 corner
border-radius: 1rem;
Enter fullscreen mode Exit fullscreen mode
  • [2 values syntax]First value for top and bottom and second value for left and right
border-radius: 1rem 2rem;
Enter fullscreen mode Exit fullscreen mode
  • [3 values syntax]First value for top. Second value for left and right. Third value for bottom
border-radius: 1rem 2rem 3rem;
Enter fullscreen mode Exit fullscreen mode
  • [4 values syntax]Separate value for each corner in clockwise order - top, right, bottom, left.
border-radius: 1rem 2rem 3rem 4rem; 

### Border properties 

You can also condense border properties into one line. In this case though the order of the values doesn't matter.

Enter fullscreen mode Exit fullscreen mode


css
/*LONG */
.blue-border{
border-width: 1px;
border-style: solid;
border-color: blue;
}

/*SHORTHAND */
.blue-border {
border: 1px solid blue;
}


### Font properties

Same applies to the font properties. Although in this case the values can get long individual properties can be easier to read sometime. 

Enter fullscreen mode Exit fullscreen mode


css
/* LONG */

.heading {
font-style: italic;
font-weight: bold;
font-size: 3rem;
line-height: 1.4;
font-family: Arial, sans-serif;
}

/SHORTHAND/

.heading {
font: italix bold 3rem/1.4 Arial, sans-serif;
}


### Background properties

And of course background properties can be condensed as well. 

Enter fullscreen mode Exit fullscreen mode


css
/LONG/
.background {
background-color: wheat;
background-image: url(../images/bg-cool.png);
background-repeat: no-repeat;
background-position: left top;
}

/Shorthand/

.background {
background: what url(../images/bg-cool.png) no-repeat left top;
}


--------

# SASS time-saving mixins

Using SASS makes your CSS codes very efficient. SASS is a CSS preprocessor and we have used it in almost every project. Here I am sharing some SASS mixins you can use to make your code efficient. 


### Center Blocks

We always find our self needing to center a block element so this mixin saves me a little typing. 

Enter fullscreen mode Exit fullscreen mode


css
@mixin center-block {
margin: {
left: auto;
right: auto;
}
}

// Use case
.wrapper {
@include center-block();
}

// Output
.wrapper {
margin-left: auto;
margin-right: auto;
}


### Pseudo

When using pseudo element you always need these 3 properties so why not put them in a mixin!

Enter fullscreen mode Exit fullscreen mode


css
@mixin pseudo (
$display: block, $pos: absolute, $content: "";
) {
conent: $content;
display: $display;
position: $pos;
}


Enter fullscreen mode Exit fullscreen mode


css
// Use case - default

.element:before {
@include pseudo();
}

// output
.element::before {
content: "";
display: block;
position: absolute;
}


Enter fullscreen mode Exit fullscreen mode


css
// Use case - with args

.element:befire (
@include pseudo {
inline-block, relative, "*"
);
}

// output

.element:before {
content: "*";
display: inline-block;
position: relative;
}


### Ratio

A ratio mixin to create scalable elements (usually images). Since aspect ratio isn't very well-supported yet this alternative is useful. 

Enter fullscreen mode Exit fullscreen mode


css
@mixin responsive-ratio($x, $y) {
padding-top: unquote(($y / $x) * 100 + "%");
}

// use case
.wide-image {
@include responsive-ratio(16, 9);
}

// output
.wide-image {
padding-top: 56.25%;
}


### Truncate

Truncating text is another useful mixin have since it can be easy to forget the syntax. 

Enter fullscreen mode Exit fullscreen mode


css
@mixin truncate ($width-limit) {
max-width: $width-limit;
white-space: nowrap;
overflow: hidden;
text-overflow: hidden;
text-overflow: ellipsis;
}

// Use case
.excerpt {
@include truncate(10rem);
}

// output
.excerpt {
max-width: 10rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}


### Cover background

If you're working a lot with cover background images this one can save a lot of typing. 

Enter fullscreen mode Exit fullscreen mode


css
@mixin cover-background ($image-src) {
background-image: url($image-src);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

// use case

.hero {
@include cover-background("../image/main.png")
}

// output

.hero {
background-image: url("../image/main.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}


### Organizing

Keep you SCSS files organized by keeping you mixing in a separate file. Since mixins don't generate any output until they are used it's easier to keep them in a separate file and import whenever you need to use one. 


Enter fullscreen mode Exit fullscreen mode


css
// keep all mixins together
@import "mixin.scss";

// Separate files for mixins
@import "center-block.scss";
@import "pseudo.scss";
@import "responsive-ratio.scss";
@import "truncate.scss";
@import "cover-background.scss";




--------

Thank you For Reading🤩 Subscribe to our  [newsletter](https://www.devintro.com) , we send it occasionally with amazing news, resources and many thing. Also if you find something useful share to world🥺. 
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
santokhan profile image
Santo Khan

very helpful