Loading...

Sass Functions to Kick-Start Your Style Sheets using HTML & CSS

View: 347    Dowload: 0   Comment: 0   Post by: hanhga   Category: HTML-CSS template   Fields: Other

CSS is used to style your content. Okay, that’s possibly the most obvious statement anyone working in the web can make these days, but it’s important because Sass, as a CSS preprocessor, is also then responsible for helping you style your content. It can do it just that little better.

In fact, Sass has a number of built-in functions that help make setting up styles for your project a lot quicker and easier.

Today we’ll look at just a few of them, ranging from manipulating color to number powers that can help us in making our own functions.

Darken and Lighten

Possibly two of the more well-known ones in this list, I’m going to count these as one since they do the same thing in different directions.

As the names suggest, darken and lighten will darken and lighten a color by a certain percentage respectively. You could use them on a buttons hover state or throughout a site to create hierarchy and would write them like so:

$main-color: #6dcff6;
$darker-color: darken($main-color, 20%);
$lighter-color: lighten($main-color, 20%);

The second argument in these two functions takes a percentage value by which to darken/lighten a color. This way you don’t have to look up the hex for a slightly lighter color every time you want an easy interaction state. For example, you could do this:

.brand-button {
    background: $main-color;
}

.brand-button:hover {
    background: $lighter-color;
}

.brand-button:visited {
    background: $darker-color;
}

Which compiles into this:

.brand-button {
    background: #6dcff6;
}

.brand-button:hover {
    background: #cdeffc;
}

.brand-button:visited {
    background: #0fafee;
}

Using these means that you could make an effective color palette within your styles that can remain consistent throughout the project. If, for instance, you have highlight and inactive state colors based off of a main brand color and your client decides to change their main color midway through development (it happens more than I care to admit…) you only have to change one value and see it cascade throughout the rest of a site.

Opacify and Transparentize

Another pair of functions, and sticking with colors, opacify and transparentize make colors more or less opaque respectively.

Personally, I’ve found these helpful when working with modals and other pop-ups where you might want the background content faded out.

$main-color: rgba(0, 0, 0, 0.5);
$opaque-color: opacify($main-color, 0.5);
$transparent-color: transparentize($main-color, 0.3);

Unlike darken and lighten, the second argument in these two functions needs to be a decimal between 0 and 1 instead of a percentage. These functions are helpful for colors based off of a single, main brand color that permeate throughout a project. And again, by including these functions, you’re able to make a change to the main color alone and the it will propagate accordingly.

You could use it like this:

.modal.focus {
    background: $main-color;
}

.modal.blur {
    background: $transparent-color;
}

.main-content {
    background: $opaque-color;
}

Which will compile into this:

.modal.focus {
    background: rgba(0, 0, 0, 0.5);
}

.modal.blur {
    background: rgba(0, 0, 0, 0.2);
}

.main-content {
    background: black;
}

You can also use fade-in and fade-out to create the same effect as these, as they’re aliases for opacify and transparentize.

Complement

As the name suggests, this will return the complement of any color that gets fed into it. This is especially useful if you’re trying to create a call-to-action on your page or view to create a bit of visual contrast. Again, this alleviates the need to go look the color up and can also hinge on that main brand color.

$main-color: #6dcff6;
$call-to-action: complement($main-color); //=> this will return #f6946d

Percentage

Sass’s numeric functions seem focused on helping you create your own functions or loops. Percentage, for instance, converts any number into a percentage like so:

width: percentage(0.16) //=> this will return 16%

As before, most usable values will be normalized ones (between 0 and 1). It can also take mathematical equations as arguments, allowing you more flexibility:

width: percentage(100px/50px); //=> this will return 200%

It doesn’t even care if you shove units like px onto the values. This makes it a candidate for easy typographic or responsive value conversion, where percentages are king. What a nice guy!

If

Sass comes with the ability to write normal if statements using “@if” and it does a great job in replicating what you’d find in a traditional programming language to create some fantastic conditional logic.

In addition, though, it also provides us with an inline if function! This if function works much like the ternary operator in a number of other programming languages:

.foo {
   width: if( 1 > 2, 400px, 500px); //=> this will return 500px
}

It accepts three arguments, the first being the condition to check, the second being the output if the condition is true, and the third being the output if the condition is false.

You could use this ternary function if you wanted to create variable-dependent conditions (if the width of an article element is bigger than an aside element, for instance) in your style sheets, though the possibilities with this one are a little more open-ended.

Personally, I find this more useful in responsively-focused projects. You could use this to change properties based on otherwise unrelated variables (like the font-size of an element depending on the width of its container) or even have properties rely on variables that change at different screen sizes or displays (like changing the background image of an element for retina screens).

 

Sass Functions to Kick-Start Your Style Sheets using HTML & CSS

CSS is used to style your content. Okay, that’s possibly the most obvious statement anyone working in the web can make these days, but it’s important because Sass, as a CSS preprocessor, is also then responsible for helping you style your content.

Posted on 19-03-2016 

Comment:

To comment you must be logged in members.

Files with category

  • Business/Consulting HTML & CSS Template

    Business/Consulting HTML & CSS Template

    View: 54    Download: 2   Comment: 0

    Category: HTML-CSS template     Fields: none

    It's elegant Business HTML Template. You can use it for creating Business, Finance, Corporate, Consulting websites or promoting your services. Looks perfect in all major browsers, tablets, and phones. Clean and commented code lets you customize it...

  • Photography Portfolio HTML/CSS Template

    Photography Portfolio HTML/CSS Template

    View: 56    Download: 1   Comment: 0

    Category: HTML-CSS template     Fields: none

    Portfolio and Photography HTML5/CSS template build with latest bootstrap framework , best suited for photographers. Features 3 HTML5/CSS3 Templates Video background for the homepage (YouTube Only) Supersized slideshow for the homepage Built on...

  • Creative Login Form with Validation

    Creative Login Form with Validation

    View: 64    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    Upturn customized LOGIN FORM & INPUT STYLES is ready for Desktop, tablet and mobile devices. Simple to implement. Just copy the HTML and link to the CSS,JS file. You can easily edit, change and customize them for yourself. For students or anyone else...

  • Login Form Like Facebook

    Login Form Like Facebook

    View: 59    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    This is a simple Facebook form that can be imported to your site with ease. Please don't forget to give credit to original developer because I really worked hard to develop this project and please don't forget to like and share it if you found it...

  • Custom-able Invoice: Easy to Use

    Custom-able Invoice: Easy to Use

    View: 53    Download: 1   Comment: 0

    Category: HTML-CSS template     Fields: none

    Make billing easy with Free Invoice Template. Professional invoices for your business: Proforma, Service, Sales, Freelance. Please don't forget to give credit to original developer because I really worked hard to develop this project and please don't...

  • Awsome Responsive HTML Pages

    Awsome Responsive HTML Pages

    View: 42    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    A responsive html pages. The site have self sliding images on the index page. There are drop down menu with icons on them. The site have bootstrap that makes it responsive to different devices .

  • How To Create an Animated Search Form

    How To Create an Animated Search Form

    View: 300    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    How To Create an Animated Search Form, Learn how to create an animated search form with CSS.

  • How to reset / remove chrome's input highlighting / focus border? used CSS

    How to reset / remove chrome's input highlighting / focus border? used CSS

    View: 243    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    You have seen that chrome puts a thicker border on :focus but it kind of looks off in my case where I've used border-radius also. Is there anyway to remove that?

 
File suggestion for you
Loading...
File top downloads
Loading...
Loading...
Codetitle - library source code to share, download the file to the community
Copyright © 2018. All rights reserved. codetitle Develope by Vinagon .Ltd