Manual compilation of SASS files

By the manual compilation the code is compiled “by hand”. That means that every time you make a change in the SASS file, you have to compile it before you see some result in the browser (or in the CSS). This method is not very used, since it demands additional efforts, which takes additional time. Anyway there may be cases in which the manual compilation is preferred.

Step 1)
Create a new file, put some SASS code in it and save it with extension “.scss”. I`ve used the name “style.scss”. I used the following code, but you can do it with every SASS code you like:

1. $blue: #0000ff;
2. $margin: 20px;
4. .navigation {
5. border-color: $blue;
6. }
8. .border {
9. padding: $margin / 2;
10. margin: $margin / 2;
11. border-color: $blue;
12. }

Step 2)
Open the command prompt and navigate to the directory in which you saved the SASS file you just created.

Step 3)
After you get in the right folder type “sass style.scss style.css”. That is the minimal thing you need to compile a SASS file. Actually we are “saying” to the compiler: “take style.scss, compile the code in it and return it as css file, which is actually style.css”.

Step 4)
Go to the folder you saved the SASS file. There you`ll also find the newly created style.css file. There is also another folder called “.sass-cache”. SASS automatically creates that folder to save the cache history of the compiled files. The compiler uses that folder by every compilation in order to make the process faster. You can feel that especially if you work with big collections of SASS files.

Step 5)
Look at the result in the CSS file. You`ll find a valid and well formatted CSS code.
That is actually the whole procedure. A big disadvantage of manual compilation is that you can compile only one file at a time. For example if you have two distinct files, you`ll have to redo the command twice.


Changing image on hover with css without a delay

You create a menue in your web page, that is not made of simple text links, but instead there is a small image for each link that changes slightly wenn hovering over it with the mouse. Each image is placed via the "background"-attribute of the "div"-tag. When hovering over that image, the "hover"-method calls the 2nd image, that shall be shown. Now there is the problem, that when loading the page for the very first time, only the 1st image of every link is loaded. The 2nd ones only gets loaded when hovering over them the first time. And exactly in that moment a very very short delay in loading the 2nd image ist noticeable.

Image with a text overlay that is dynamically generated

I want to display an image with a title that lays on top of the image. This title should be dynamically generated, therefore no photo editing tool can be used in this situation. The text comes from a dynamically generated JSON object, which then can be used by a JavaScript in order to inject the title information into a website. The only technologies that can here be used is web technologies such as XHTML and CSS.

Create android application by using standard web technologies such as HTML5, CSS3, and JavaScript

The goal is to build applications for mobile devices using well known standard web technologies like JavaScript, HTML5, and CSS3, instead of device-specific languages such as Java or Objective-C.

How can I add social Media Buttons (Facebook, Twitter & Co.) to jQuery colorbox?

The aim is to display social media buttons on each image in the jQuery colorbox view. As displaying something other than text in the lightbox is not possible by default (<a href="http://www.jacklmoore.com/colorbox/">jQuery colorbox</a>) (see documentation, demo), we need a custom solution to do the job. Note: As jQuery colorbox is a Plugin for certain content management systems, it is important that the change should be done WITHOUT changing the code of the lightbox and WITHOUT accessing the HTML directly, as Plugins for CMS should not be modified as they will loose update compatibility. The result should look like in attachment 1 (sample.png).

How to get a consistent website design using Bootstrap

If your are new to CSS and HTML designing your website can be a hard and time consuming activity. To create a site that is easy to use and also looks nice you can spend hour on styling your different object and components.

Inspect HTML for Web-page description

When we are doing usability analysis of a web page, it is often convenient if not necessary to know what is the html and css form of the visual elements displayed on the page. This could be done by checking the page source code, but this solution is time consuming, since we have to do a logical match between the code and the element.

Customized web fonts

In the past, if the embedding of customized fonts was required, it would result into the use of images that would display the desired words. Nowadays customized fonts can be rendered dynamically by the browser using different technologies.


Hightlight words in free text using jQuery

With the method addClass() and an CSS class it is easy to change the appearance of the text with the limitation that the text has to appear in HTML tags. For highlighting specific words in free text, this method is not working.

De-bloat Google Images

The current version of the <a href="http://images.google.com/">Google Image Search</a> has several usability improvements above the old one. In my opinion it also has flaws: if you click on an image in the search result list it points to a site called "Google Image Result" which displays the actual image in the foreground and the website where this image was found in the background. The old version of Google Image Search (which is still available in the Austrian version <a href="http://images.google.at/">images.google.at</a>) has some similar behavior. The intention of this page is to select if you want to either view only the image or the whole website. For me, neither of these two versions work especially well. Both, the old and the new approach load a whole website where I'm only interested in a single picture. One more negative aspect of this behaviour is, that there are no direct links from the search result view to the actual image files. In nine out of ten cases this makes me feel kind of slow. I'm looking for a way to modify the search results page of google image view to make the links of the individual pictures point to the actual files instead of the intermediary preview page.


Subscribe to CSS