Learn SASS for CSS

by Koree S. Monteloyola

 

Sass Tutorial for CSS by Tekinoypi

If you have been developing websites for quite some time, I'm sure you have noticed that some of your CSS (Cascading Style Sheets) are getting longer or more complex, which means code maintenance is also getting harder, right?

One way to DRY (Don't Repeat Yourself) in CSS coding is by using Sass (Syntactically Awesome Stylesheets).

I came across Sass because of one of my web development projects for Magento templating is using it by default.

Sass is a stylesheet scripting language that is interpreted by a preprocessor into an ordinary CSS. Some features of Sass are variables, nesting, mixins, partials with imports, control directives, expressions and more.

This article will provide you the basic instructions and examples to help you kickstart learning and using Sass in your web development projects.

Installing Sass

You could either install it through command line or an application. First things first, you should install Ruby before installing the Sass gems.

For Linux

Install Ruby first then execute this command

sudo su -c "gem install sass"

For Windows

Install Ruby first using the RubyInstaller for Windows, follow the commands below to complete Sass installation.

For Mac

Ruby is pre-installed in Mac, follow the commands below to complete Sass installation.

Command Line Sass Installation

  1. Open terminal or command prompt
  2. Execute this command to install Sass
    sudo gem install sass
  3. Check if it is working. You should see Sass's version.
    sass -v

Syntaxes

Sass has 2 syntaxes:

  1. SCSS (Sassy CSS)
    • File extension is *.scss
    • This is actually a CSS3 syntax extension
    • Valid CSS3, means valid SCSS
    • Supports CSS hacks, vendor specific syntax, old IE filter syntax.
  2. SASS
    • File extension is *.sass
    • Uses the older indented syntax, means indentation is preferred vs. brackets
    • Uses newlines, not semi-colons
    • Quicker to write and easier to read

For this article we are going to use the SCSS syntax, which is the preferred/default syntax of Sass.

Your First Sass Project

Create a project folder named "sass-tutorial". Within the "sass-tutorial" folder, create 2 files:

  1. _varsconstants.scss (preceding a file with an underscore means Sass will ignore it and NOT compile it to a CSS file.)
  2. style.scss

Next, open and edit your _varsconstants.scss to add your variables. The variable "$weather" will be used for a Sass Mixin code example, which can be found at the bottom of this tutorial.

$primaryFont: Helvetica, sans-serif; 
$primaryFontColor: #666; 
$percent100: 100%;
$weather: sunny;

Next, open and edit your style.scss to this:

/*
*Partials with Import directive
*/
@import 'varsconstants';


/*
*Variables
*/
body {
  font: $percent100 $primaryFont;
  color: $primaryFontColor; }

Your style.scss demonstrates how to use Partials with Import directive and  Sass variables.

Next, to create a CSS file from SCSS you should open a terminal or command prompt and make sure your current directory is in "sass-tutorial" then execute this command:

sass style.scss style.css

Congratulations! You have just created your CSS file, and it should look like this:

/*
*Partials with Import directive
*/
/*
*Variables
*/
body {
  font: 100% Helvetica, sans-serif;
  color: #333; }

Other Usefull Sass Commands

You can also convert your SCSS files to SASS syntax:

sass-convert style.scss style.sass

and vice versa:

sass-convert style.sass style.scss

You can also watch a folder for changes so it automatically interprets your SCSS file to CSS, just use this code:

sass --watch style.scss:style.css
>>> Sass is watching for changes. Press Ctrl-C to stop.
>>> Change detected to: style.scss
      write style.css
      write style.css.map

Sass also has 4 styles for your CSS output, it can be nested, expanded, compact or compressed. The example below shows how to use the compressed style, which is not meant for human reading.

sass style.scss style.css --style compressed

Using a Sass GUI Appliction: Koala

If you are not comfortable in using Sass through command line, you can use several Sass GUI applications. I've tried using Koala (for Mac) which is an open-source GUI app for Sass, Less and Compass. Here is a screen capture for Koala's interface.

Koala GUI Sass screenshot

 

More Sass Examples: Mixins and if Control Directive

These are just some of the COOL examples that I saw from Sass's documentation and found useful for some of my websites.

Mixins
SCSS

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


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

.box {
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -ms-border-radius: 10px;
 border-radius: 10px; }

if Control Directive
SCSS

p {
 @if $weather == sunny {
  color: blue;
 } @else if $weather == cloudy {
  color: #ccc;
 } @else if $weather == rainy {
  color: #666;
 } @else {
  color: #000;
 }
}
CSS
p {
  color: blue; }

 

For more examples here is a zip file of a SCSS file and its interpreted CSS file for your reference. I hope this tutorial has helped you to understand and integrate Sass to your web projects.

Happy coding!

Category: CSS, Tutorials, Web

CSS3 Keyframes for Chrome and Firefox

by Koree S. Monteloyola

 

Web Guide CSS3 Keyframes for Chrome

If you're reading this you're probably looking for a sample CSS3 keyframes code that works for Chrome and Firefox. We'll you've come to the right place.

The solution to your problem is to follow this sequence in writing your keyframes script.

 

/*For InternetExplorer 10, FireFox 16.0*/
@keyframes nameOfCss3AnimationHere { /*Your animation script here*/ }

/*For FireFox 5.0*/
@-moz-keyframes nameOfCss3AnimationHere {/*Your animation script here*/}

/*Chrome 4.0, Safari 4.0, Opera 15.0*/
@-webkit-keyframes  nameOfCss3AnimationHere { /*Your animation script here*/}

View the CSS3 keyframes demo. Enjoy!

Category: HTML, Tutorials

How to launch your static website

by Koree S. Monteloyola

 

web development guide iconIn this article I would give you the checklist of the things that you need in order for you to launch your website with static webpages, which mean that there are no server side scripting involved. Your webpages would be coded using HTML, CSS and javascript - if you know how to apply it.

You would save time and money if you transact directly from these providers. Avoid purchasing domains or web hosting services from resellers, because if you do, most likely you will not have full-control over your domain or web hosting settings and configurations, and sometimes it's also more expensive. Spare yourself of these problems and follow my instructions.

Get your domain name.

This is your address on the web, this would be your .com or .edu or .net or .ph. If you want to have the .ph domain, purchase it from the official registrant which is Dot.ph. For the other international top level domains like the .com o .net, you can purchase it from NameCheap.com. You pay for this annually or once a year.

Purchase a web host.

A web host is where you store your files. You pay for this monthly. You can try one of these hosting providers.

OneWebUnit.com is a hosting service provider that is managed by Kairos I.T. Services. Hosting plans are categorized into small, medium, large and custom.The small hosting plan is perfect for students, individuals and organizations to host their microsite or portfolio websites. Price starts at a very affordable price of P500.00. By the way, this hosting provider does not oversell.

Arvixe.com is a good web host provider, they offer several hosting plans for Linux and Windows platforms. After purchasing you would receive an email from them wherein cPanel & FTP login and nameservers are given to you. Use the nameserver to point your domain to your web host. If you need help with this send me an email or use the contact page, and I'll help you to setup your site.

Upload your web pages using an FTP client.

Download FileZilla to transfer or upload your files to your webhost in Arvixe.com. After uploading your files, check it using a browser - choose one: Chrome, FireFox or Internext Explorer. It's better if you'll test your website with all of these browsers to make sure that it is error free.

...and your done.

Are there other options? YES.

If you want to use cloud computing here are some platforms for you.

Google Sites

With Google Sites, you don't need to create your web pages and you don't also have to purchase your web host. Google Sites would provide you an interface for web publishing and they would host your files. Your website would be accessible using a custom URL or link that Google Sites would provide for your site. If you want to point your own domain to this, make sure that you have full control over your DNS configuration/settings. Also, graphical user interface customizations might be limited and can be more complex, so design wise, make sure that your design team knows the limitations of this platform before you execute the design and programming phase.

Students and staff from the academe would want to take advantage of Google Apps for Education, because it's completely free.

Amazon Web Services S3 with Amazon Route 53

AWS S3 allows you to create a bucket and upload your static HTML files to the bucket. Like Google Site's, AWS S3 would also provide you with a customized URL/link, if you want to use your own domain to access your website you should also get Amazon Route S3.


Those are your options in web publishing. Go crazy.

If you need help in web development, go to the contact page, fill out the form and hit send.

Use your Android Froyo as a mobile modem

by Koree S. Monteloyola

 

The USB tethering feature of Android Froyo allows you to share your phone's mobile network with a laptop or desktop computer, which is similar to the concept of using a usb modem (stick) or dongle.

htc_tether0

The 3 major telcos in the Philippines today thar offer mobile broadband services are Globe, Smart and Sun cellular. In the image below, I have Globe Tattoo and Smart Bro USB modems, as you can see I don't have a Sun Cellular USB modem, however, what I do have is a Sun cellular prepaid sim card and an Android Froyo powered HTC Desire. I will use USB tethering to complement what I lack.

sun_smart_globe_android_tether

Below are the details on how to use this feature:

The essentials:

  1. Configure the correct Access Point Name (APN) for your mobile phone. If you have no idea how to do this, contact your telco's customer service. (for prepaid Globe subscribers in the Philippines check my previous post about APN config)
  2. Android version 2.2 (codename: Froyo) should be installed on your phone
  3. HTC Micro USB data cable
  4. Install HTC Sync on your computer.

HTC Sync

HTC Sync serves as a device content manager for your phone using a computer and also installs the required device drivers. By default, the file for this software is already on your phone's SD card, if ever you accidentally deleted this file on your phone, you can go to this link (HTC Sync for all HTC Android Phones) to download the file.

After dowloading and installing HTC Sync, connect your phone to the computer via the micro USB data cable then proceed to HTC Sync device setup. Make sure that 'HTC Sync' is selected in your 'Connect to PC' screen.

htc_sync_devicesetup

You don't really need to sync all of the contents of your phone to the PC at this time, we just have to make sure that HTC Sync can detect your phone and has a saved profile for it.

htc_sync_devicesetup2

Just to make sure that everything is working, disconnect your phone from the PC, restart your computer, reconnect your phone to the PC (make sure that 'HTC Sync' is selected in your 'Connect to PC' screen); check if HTC Sync can already detect your phone automatically.

This is a one time setup, you don't need to open this software everytime you want to use USB tethering.

USB Tethering

  1. Turn on 'Mobile Network'. There are 2 ways to do this:
    • Do a long press on the power button, on the "Phone options" screen, tap on "Mobile Network" to turn it on (or off).

      htc_mobile_network_on

    • Go to "Settings" > "Wireless & Networks" > Tap on the checkbox to turn it on
  2. Connect your phone to the PC using the micro USB data cable
  3. This time in the "Connect to PC" screen, select USB tethering

    htc_tethering

  4. On the taskbar, click on the network connection icon, you would see that a new active network is added on the list. You might get a different name for the new connection. Select the new network and start browsing. Yippee!

    htc_tether2

 

Here's the the "Local Area Connection Properties" for the new network connection:

htc_tether3

 

I guess this answers a friend's question, 'no? :)

 

Make your HTC Desire – Android Froyo as a portable WI-FI hotspot

by Koree S. Monteloyola

 

This is a tutorial on how you can use your HTC Desire – Android Froyo as a portable Wi-Fi hotspot via a paid mobile internet.

On your Phone:

  1. Make sure that you have configured the APN for your phone, otherwise call your network’s customer service to learn how. (for Globe prepaid subscribers check my previous post about APN config)

    globeAPN

  2. Configure the ‘Portable Wi-Fi hotspot settings’.
    • Go to ‘Settings’ > ‘Wi-fi and networks’ > tap on ‘Portable Wi-Fi hotspot settings’
    • Fill out the following fields:
      1. Router name: <mine is ‘HTC Network’>
      2. Security: <mine is WPA (TKIP)>
      3. Password : <I recommend to use this feature to prevent strangers from connecting to your phone.>
      4. Press ‘menu’ button > Tap on ‘Advanced’
        • Wi-Fi Channel : <default is Auto>
        • LAN Settings : <leave as is if you don’t know what to put on these fields>
        • Power mode:  <tap to choose what would happen in case of prolonged inactivity>
      5. Tap on ‘Manage users’
        • Enable ‘Allowed users only’
        • Tap on ‘Max. connections’ to increase or decrease the number of allowed connections. Your options are from 2-8.
  3. Turn on ‘Mobile Network’.

    There are 2 ways to do this:

    • By doing a long press on the power button and tap ‘Mobile Network’ to switch on or off
    • By going to Settings > Wireless and Networks > Tap on the checkbox for ‘Mobile Network’
  4. Turn on hotspot. Go to ‘Settings’ > Wireless and Networks > Tap on the checkbox. The ‘Wi-Fi hotspot active’ icon shows up on the topmost left of the screen.

htc_desire_wifi_hotspot

On your computer:

Check the wireless network connections available, you will now see the “HTC Network” as an option. Select this network and enter the password you have previously set.  Surf and enjoy.

htcnetwork

Page: 1 2