Month: September 2015

Global Variables in SASS

Using global variables in a SASS stylesheet saves time by eliminating repetitious code. In this example I will show how to declare global color variables that can be referenced by name in multiple partial stylesheets.

First we create an SCSS file called “_variables.scss”. The name isn’t important but the leading underscore is. Inside we declare the variables like so:

Sass
1
2
$turquoise: #1abc9c;
$wisteria: #8e44ad;

Then in the main SCSS file you import the variables file:

Sass
1
@import 'variables';

The variables should now be accessible from inside other stylesheets provided they are properly imported. Here is an example of a “welcome.scss” file that uses the global variables:

Sass
1
2
3
4
5
6
7
.container {
    background-color: $wisteria;
}
 
h3 {
    color: $turquoise;
}

 

Setting Environment Variables in Unix Shell

Setting environment variables allows you to reference sensitive data, like passwords and API keys in an application, without making them publicly visible online or in a public repository.

Example:

1
2
user_name: "my_actual_username"
password: "my_actual_password"

becomes…

1
2
user_name: ENV["USERNAME_VARIABLE"]
password: ENV["PASSWORD_VARIABLE"]

To do this, first check to make sure you are using a bash shell:

1
echo $SHELL

Then edit your “~/.bashrc” file and add:

1
2
export YOUR_USERNAME="yourusername"
export YOUR_PASSWORD="yourpassword"

Save the file and you’re all set. You will have to open a new shell or restart your terminal to continue.

Rails API Basics – Guild Wars 2 Dye Gallery

This is an example showing how to use the Guild Wars 2 API to create a simple dye gallery using Ruby on Rails.

The first step is to generate a “Dye” model with the attributes of “content” as “text” and “color” also as “text”. This will enable the data gathered from the API to be organized for use in the gallery.

1
rails g model Dye content:text color:text

Next we want to add the Guild Wars 2 API gem to our gemfile.

1
gem 'gw2'

Make sure to run “bundle install” after adding the gem.

Heading to the seeds.rb file of our database we put the following code:

1
2
3
4
5
6
7
8
9
Dye.delete_all
 
GW2::Misc.colors.each do |dyes|
name = dyes[1]['name']
color_list = dyes[1]['metal']['rgb']
color = color_list[0].to_s + ", " + color_list[1].to_s + ", " + color_list[2].to_s
 
Dye.create!(:content => name, :color => color)
end

Dye.delete_all simply deletes the dyes so that we load a fresh database each time.

The next line calls the API specifying the section Misc>colors.

Then for each ‘color’ it finds the ‘name’ and sets it to the variable ‘name’, it finds the RGB color combination and sets it to the variable ‘color_list’. After that it converts each component of the RGB color array to a string which will then be fed into the css in our gallery view.

Last, each dye is created with name assigned to ‘:content’, and color assigned to ‘:color’.

In the index page of our dyes view we have the following:

1
2
3
4
5
6
7
8
9
10
11
12
<div class="dyes">
  <div class="container">
  
    <% @dyes.each do |dye| %>
    <div align="center" class="dye">
      <p class="content"><%= dye.content %></p>
      <div class="thumb" style="background-color: rgb(<%= dye.color %>);"></div>
      
    </div>
    <% end %>
  </div>
</div>

For each dye we create a div that displays the name of the dye color and a thumbnail div that is filled with the color itself using the RGB color we setup earlier.

As far as styling goes here are the critical parts:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.dye {
  background-color: #fff;
  font-weight: 300;
  padding: 16px;
  margin-bottom: 0;
  float: left;
  width: 9%;
  
}
 
.thumb {
  border-radius: 15px;
  height:100px;
  width:100px;
}

To display the dyes and sort them we create a “Dyes Controller” with an index method.

1
rails g controller Dyes

1
2
3
4
5
def index
 
    @dyes = Dye.order("content ASC")
 
end

The final product looks like this:

Dye Gallery