Some CSS tricks that Frontend itself may not know (Part 10)

Tram Ho

1. The power of & in SASS

1.1. Combining with BEM is very effective

Suppose to have 1 CSS output like this:

Then in our SASS code we will just need to write a brief nesting selector like this:

1.2. Use & with selectors > , + , ~

In part 1 of this series, I introduced a tip about the selector :not in case of creating border separating between navigation items, I continue to analyze that case!

I chose non-final items and set border-right

I will select the non-first items and set border-left

Certainly the result is similar

And I have a more concise way instead of typing :not(:first-child) , now just & + &

1.3. Additional styles for components in different contexts

According to Documentation of SASS it is defined as Referencing Parent Selectors

Speaking for easy understanding like this,

I have 3 pages Home , Contact and About , starting with each page I have a class wrapper named home-wrapper , contact-wrapper and about-wrapper

I have a component of the button, the background color is red

And on the About page, I need the button to be filled with a background of gold

Then I will write the SASS code as follows:

This way of writing is very beneficial for maintaining the code later.

References:

  • https://css-tricks.com/the-sass-ampersand/
  • https://css-tricks.com/sass-techniques-from-the-trenches/#article-header-id-0

2 :initial-letter really beneficial! [Not Cross-Browsers]

Have you ever met the type layout pages, news has huge capital letters at the beginning of the title yet?

Like the letter T in the title "Talking to your … .." as shown below

alt

You will immediately think of the ::first-letter attribute to style the letter T above, but unfortunately the pseudo element above is not enough to have the same CSS as the image.

I can only apply color or padding for the first letter, it is impossible to set font-size with the desired number of lines of text .

Fortunately, CSS has just released a new attribute called initial-letter, unfortunately it is still in the draft phase and currently only works on Safari.

Please open this article to see on Safari!

If you are looking at the image below, then our initial-letter attribute is already working ok!

References:

  • https://caniuse.com/#feat=css-initial-letter
  • https://css-tricks.com/almanac/properties/i/initial-letter/
  • https://webdesign.tutsplus.com/tutorials/better-css-drop-caps-with-initial-letter–cms-26350

3. Fun game with transform: scaleX(-1)

Have you ever considered moving the scrollbar to the left, instead of the right?

It's a bit crazy, but suppose you're building your own unique and strange portfolio site, then modifying the UI to make it go against the UX concept is a bit of a good idea sometimes!

With 2 simple steps:

  1. Set transform: scaleX(-1) on the parent tab, the scrollbar moves to the left, but the text direction is inverted from right to left
  2. Set further transform: scaleX(-1) then the text returned to standard from left to right.

Refer to the previous sections here:

Share the news now

Source : Viblo