Category: Sass

Save Time with Sass Using ‘@extend’

With every new project I do my best to look for ways to save time with my code. This not only helps me avoid getting lost in redundant code, but also saves me time, and as we all know, time is money!

Coding CSS with Sass is already a huge time saver and one of its features goes a long way to eliminate the need to repeat any code. Here’s how to use ‘@extend’ to quick create different types of buttons.

See the Pen Sass @extend by Richard (@barkins) on CodePen.

Although using the ‘@extend’ feature is a fantastic way to save time, there are other ways to save time with Sass. Creating a Sass Mixin for example would be an excellent alternative.

Filed under: SassTagged with: ,

Sass Jump Start for CSS Beginners

140H

Sass is an extremely easy to learn method of coding CSS that can increase your website production time by as much as 30 to 40 percent (purely unscientific).

Before I demonstrate any code, you must first be aware that no internet browser can read Sass natively. Therefore, you will need a compiling method to convert any Sass into traditional CSS. You have two paths you can take in this regard. Either work within a the Terminal ala command line, or my preferred method, working with an application.

My go-to application is CodeKit (Mac only). It’s relatively cheap ($29) and extremely powerful in helping me create modern and efficient websites. Check out these videos to bring you up to speed with this front-end web developer tool.

Prepros is another great compiler and works on Windows, Mac and Linux.

To recap, browsers don’t read Sass code, you’ll need to convert it to CSS with either command line (Terminal) or application (CodeKit).

In the meantime, for the sake of quickly diving into Sass, you can go ahead and use CodePen right away to learn how to code with Sass. After creating a new “pen” click on the gear icon (in the CSS box) and select “Sass (.scss)” and you’re good to go!

scss

Nesting

Nesting is a great way to cut down on repeating yourself when coding a stylesheet. Here’s an example of the same style coded with CSS and Sass.

CSS Method

.container {
   max-width:960px;
   margin:50px auto;
}

.container a{
   color:red;
}

.container a:hover {
   color:blue;
}

Sass Method

.container {
   max-width:960px;
   margin:50px auto;
   a {
     color:red;
     &:hover {
        color:blue;
     }
   }
}

As you can see, no need to keep retyping “.container” over and over again to select child elements. Cool, right? Now, picture doing this with various sections on your web page. Huge time saver!

Variables

Creating and working with variables in programming is essential and now its power can be utilized with CSS as well, via Sass. By assigning styles to variables you can quickly update things like colors throughout your entire stylesheet just by changing one value.

CSS Method

.container {
   border:1px solid #cc3300;
}

.container a {
   color: #cc3300;
}

As you can see, we’re repeating the same color value of “#cc3300” and that just goes against the DRY rule, Don’t Repeat Yourself.

Sass Method

$orange: #cc3300;

.container {
   border:1px solid $orange;
   a {
      color: $orange;
   }
}

If in the future should you want to change the orange color, simply update the value for the variable, “$orange” for instance replace “#cc3300” with “#ff6836” and it will update the color anywhere you have “$orange” referenced in your stylesheet.

Mixins

I like to think of Mixins as Functions from programming. For instance, instead of having to continuously type out browser prefixes (-webkit-, -moz-, -ms-) for lets say a “border-radius” you can create a simple Mixin.

Setting up a Mixin

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

Utilizing the Mixin

Now that you have a Mixin for “border-radius” created, here’s how you initlize it.

.container { 
   @include border-radius(10px); 
}

In short, instead of having to rewrite every browser prefix throughout your code whenever you want to use a border-radius, simply take advantage of a mixin and save time!

Import

It’s not a good idea to use “@import…” to include additional stylesheets in your main stylesheet because whenever a page loads in a browser, it has to send out multiple HTTP requests which adds to the load time of your website.

Sass has a fantastic feature that lets you have the convenience of import, yet without the draw back of additional load times.

Say for instance you have a “main.scss” document and a “reset.scss” document. Instead of converting each of them into “main.css” and “reset.css” you should import or in other words, merge them into one document. Here’s how it’s done with Sass.

At the top of page in main.scss” include the following:

@import 'reset';

And that’s it. Once “main.scss” runs through a compiler such as CodeKit, it will prepend “reset.scss” to the top of “main.scss” and output a merged file called “main.css” that includes both documents.

This is a really quick and easy way to manage multiple stylesheets in your web project.

Wrap Up

I hope this gave you enough confidence to dive deeper into Sass and start building all of your future websites with Sass.

Learn more on the Sass website and check out this very handy list of pre-built Sass mixins.

Filed under: Sass

Sketchbook with HTML5 Canvas and jQuery

Here’s how to build a drawing space on your website using the HTML5 canvas tag. This article will cover the very basics of getting started with canvas, but you’ll soon see how you’ll be able to take it even further.

Here’s a demo of this project.

See the Pen Sketchbook with the Canvas Tag by Richard (@barkins) on CodePen.

HTML

The only key tag in the HTML to take notice of is, you guessed it, canvas. You will need to include the width and height directly inside the tag, like so:

<canvas width="450" height="500" id="canvas"></canvas>

I included an id with the tag to reference later.

Here’s the rest of the HTML that houses the canvas tag.

<section>
<header>
  <h1>Sketchbook with the Canvas Tag</h1>
</header>

<article>
  
  <canvas width="575" height="300" id="canvas"></canvas>
  
  <div id="marker-container">
  
    <h2>Change Marker Width</h2>
  
    <input id="marker" type="range" max="10" min="1" value="1">
    
    <div id="shape"></div>   
    
  </div>  
  <button id="clear">Clear Sketchbook</button>
  
</article>
</section>

CSS/SCSS

I took advantage of a bit of SCSS here, just for time saving purposes. The only unusual item in the CSS is how I styled the ‘gradual increase symbol’ with border styling. Anytime you can substitute an image with some CSS, do it. It’s just good practice.

#shape {
  width: 0;
  height: 0;
  border-left: 125px solid transparent;
  border-right: 0px solid transparent;
  border-bottom: 15px solid #999;
  margin:5px auto;
}

Here’s all the CSS/SCSS.

Note: Check back soon on an article about getting up to speed with SASS (SCSS).

* {
  box-sizing:border-box;
  font-family:sans-serif;
}

h1 {
  color:#cc3300;
  margin:0 0 25px;
  font-size:2rem;
}

section {
  max-width:650px;
  margin:25px auto;
  background:#CCC;
  padding:25px;
  border-radius:10px;
  text-align:center;
  canvas {
    background:#FFF;
    border-radius:10px;
    box-shadow:0 0 15px #999;
    cursor:crosshair;
  }

  #marker-container {
    max-width:300px;
    background:#333;
    margin:25px auto;
    padding:15px;
    border-radius:10px;
    h2 {
      color:#FFF;
      margin:0 0 15px;
      font-weight:normal;
      font-size:1.2rem;
    }
  }
}

#clear {
  font-size:1rem;
  background:#cc3300;
  color:#FFF;
  border:0;
  padding:10px;
  border-radius:5px;
  cursor:pointer;
  &:hover {
    background:#FFF;
    color:#cc3300;
  }
}

#shape {
  width: 0;
  height: 0;
  border-left: 125px solid transparent;
  border-right: 0px solid transparent;
  border-bottom: 15px solid #999;
  margin:5px auto;
}

jQuery

Now the interesting part, some jQuery to help us interact with the canvas tag.

We’ll start off by creating some variables we’ll use throughout the program. The first one, marker will be used to store the color of the, well marker. The second variable, markerWidth will store the default width of the marker.

The last two variables I’ll cover in a bit, just include them for now.

var marker = "rgb(0,0,0)";
var markerWidth = 1;

var lastEvent;
var mouseDown = false;

Next up, we’ll need a function to setup the width of the marker working in tandem with the new HTML5 input type of range. Whenever $("#marker") is changed, like when a user moves the slider, the function changeWidth initiates and sets the current value to markerWidth.

var changeWidth =  function(){  
  markerWidth = $("#marker").val();
  console.log(markerWidth);
};

$("#marker").change(changeWidth);

Now we’ll need to set up the context of the canvas so that we can interact with it. This is fairly boilerplate stuff, you’ll need to include it in order to interact with the canvas tag.

var context = $('canvas')[0].getContext('2d');
var $canvas = $('#canvas');

Here’s a series of function that will activate whenever a user mouses down, moves the mouse and mouses up.

We’ll need to capture the canvas’ event in the DOM so that we can interact with properties of the canvas, which is why we passed an argument, e, through the function like so.

Next, set the mouseDown to true so that the following function will only work if it’s true. In the last function, we’ll set it back to false when the user mouses up so your cursor will stop drawing on the canvas then.

$canvas.mousedown(function(e){
    lastEvent = e;
    mouseDown = true;
    console.log(lastEvent);
})

If you look at the console now, after mousing down over the canvas tag, you’ll see the following properties you can use. That’s why the console.log(lastEvent) is there.

It should look something like this:

mouseevent

Notice, offsetX and offsetY?

We’ll use that information in the second function that initiates whenever a user mouses over the canvas tag.

mousemove(function(e){
  if(mouseDown){
    context.beginPath();
    
    context.moveTo(lastEvent.offsetX,lastEvent.offsetY);
    context.lineTo(e.offsetX,e.offsetY);
    context.lineWidth=markerWidth;
    context.strokeStyle = marker;
    context.lineCap='round';
    context.stroke();
    
    lastEvent = e;
  }
  
})

Since earlier we stored the context of the canvas in the context variable, we can access its properties. Such as setting the color of the stroke, context.strokeStyle = marker;, and then width of the stroke, context.lineWidth=markerWidth;.

Note: Here’s a full list of properties available for the canvas tag.

To finish this off, our last function disables drawing on the canvas after the user mouses up, like so:

.mouseup(function(){
  mouseDown = false; 
});

Here’s all the jQuery put together:

var marker = "rgb(0,0,0)";
var markerWidth = 1;

var lastEvent;var mouseDown = false;

var changeWidth =  function(){  
  markerWidth = $("#marker").val();
  console.log(markerWidth);
};

$("#marker").change(changeWidth);

var context = $('canvas')[0].getContext('2d');
var $canvas = $('#canvas');

$canvas.mousedown(function(e){
    lastEvent = e;
    mouseDown = true;
    console.log(lastEvent);
}).mousemove(function(e){
  if(mouseDown){
    context.beginPath();
    
    context.moveTo(lastEvent.offsetX,lastEvent.offsetY);
    context.lineTo(e.offsetX,e.offsetY);
    context.lineWidth=markerWidth;
    context.strokeStyle = marker;
    context.lineCap='round';
    context.stroke();
    
    lastEvent = e;
  }
  
}).mouseup(function(){
  mouseDown = false; 
});

The key takeaway here is how we assigned the markerWidth variable to context.lineWidth. You can also do the same with context.strokeStyle = marker; and I’ll leave you to figure how to evolve this project even further.

Filed under: CSS3, HTML5, jQuery, Sass