How to create new theme in Vaadin Project – Eclipse Mars?

Anih Agah! (bidayuh sentence for greeting)

About theme – SASS in Vaadin:

  • Custom themes are placed under (src/main/webapp – vaadin/themes/ ).
  • location is Fixed.
  • The Vaadin Folder contains static resources that are served by the vaadin servlet.
  • The Built-in themes are stored in vaadin-themes.jar.
  • The name of theme folder defines the name of the theme.
  • A theme must contain style.scss for sass or style.scss.
  • Sass can be use in vaadin by two ways:
    •  Compiling by yourself.
    • Letting the vaadin servlet to compile them for you on-the-fly when the theme is requested by browser.
  • The vaadin.com state that we must define sass theme with the name mytheme.
    • – Folder theme = vaadin/themes/mytheme.

1.) How to create new theme in Vaadin Project – Eclipse Mars?

-. Right Click project, create new Vaadin Theme.

vaadin_theme_1.jpg

-. My new theme is – mytheme.

-. The Result is like below, created 3 files automatically:

vaadin_theme_2.jpg

2.) steps 1, How to make associated the file type .scss with eclipses native CSS Editor ?

-.  Go to Window > Preferences

-. Go down to General > Editors > File Associations

-. In File Associations pane, click the ‘Add…” button on the top right.

-. For File Type:, enter *.scss and then click OK.

 

add_sass_extension_eclipse.jpg

-. Find the *.scss entry in the File Associations list and select it.

-. After selecting *.scss, on the bottom pane Associated editors:, click the Add… button.

add_sass_extension_eclipse_2.jpg

 -. Make sure Internal editors is selected on the top, then find and select CSS Editor and then click OK.

2.1) steps 2, How to Add the .scss file type to the native CSS Editor 

-. Go to Window > Preferences

-. Go down to General > Content Types

-. In the Content Types pane, expand Text, then select CSS.

-. After CSS is selected, on the bottom File associations: pane, click the Add… button.

add_sass_extension_eclipse_3.jpg

-. For Content type:, enter *.scss and then click OK.

-. Click OK to close out the Preferences window.

-. To Check result, right click file .scss , then the code in scss will have fancy syntax.

fancy_scss.jpg

3. Errors and Solutions:

3.1. Compile using mvn package command – Maven, got errors –Mixin Definition: mytheme not found, commpiling theme failed“.

  • Solutions :
  • add the “org.eclipse.wst.common.component” in your project folder – .settings.
  •  set this – if using webapp/ –  <wb-resource deploy-path=”/” source-path=”/src/main/webapp” tag=”defaultRootSource“/>

How to starting using Compass.app to compile sass automatically

Good Day , Salam sejahtera( malay), Nama brita nuan (iban), Anih agah amu (bidayuh)!  ( Greeting sentence)

How to starting using Compass.app to compile sass automatically :

  1. Firstly download from this page – compass.app.
  2. After done download,  Run Compass-app.exe. You’ll see the gray icon on your windows bars.
  3. First Create your sass project , by right click on gray icon – compass.app.

compass_1.jpg

4. I have created my project with name – sass_project. Then compass.app will load a report.

compass_2.jpg

5. What the good about this software is , you can set your sass project with its config file.

compass_3.jpg

Selamat Mencuba!!

 

SASS – Syntactically Awesome Stylesheets – CSS

1.) What is SAAS?

  • i. SASS – Stands for Syntactically Awesome Sytlesheet – created by Hampton Catlin.
  • ii. Concepts of SASS that add in CSS code :
    • a) variables
    • b) mixins
    • c) Resting
  • iii. SASS using the .SCSS and .SASS extension for SAAS File.
  • iv. For SASS – Syntax there’s no Semi-colons or brackets inside File .SCSS.

2.) How to start to Use SAAS?

  • 2.1.) To using SAAS, firstly Start Install Ruby  for compose it.
    • 2.1.1)  intallation on Windows.

intall_2

  • Setup Ruby installation Destination And Optional Tasks.

ruby_installer.jpg

  • Install sass :

gem install sass

3.) What is Compass?

  • Compass  will take your .sass or .scss source files and compile browser readable CSS for you.

3.1.) Install Compass.

On windows command Prompt : 

gem install compass

ruby_installer_7.jpg

4. How to use compass with Basic sass Project?

saas_basic_project.jpg

  • config.rb file is a file to holds all the settings Compass needs to compile the CSS correctly.

5. Watch Compass in your project sass – sass_basic_project\compass :

  • We need to tell Compass to watch our compass folder. Compass will look for any changes to the files in the sass folder of the project. In this case we have a style.scss file.
  • By using terminal cmd – run the compas watch:

ruby_installer_8.jpg

6. My file style.css and style.scss is empty.

6.1. Add our first style in sass – style.scss.

@import ‘compass/css3’;

.logo_visa {
background-image: image-url(“cc-visa.png”);
width: image-width(“cc-visa.png”);
height: image-height(“cc-visa.png”);
}

6.1.1. Instantly Magic come, the file style.css will added automatically with code css.

/* line 3, ../compass/sass/style.scss */
.logo_visa {
background-image: url(‘../images/cc-visa.png?1451549391’);
width: 50px;
height: 30px;
}

SELAMAT MENCUBA !

 

Errors & Solutions:

  1. Why I got errors when run the command install : 

gem install sass

Error:could not find valid gem ‘sasss’ <>=0>, unable to download data https://rubgems.org/

Solution:
gem install sass –http-proxy=http://<yourproxy>:<port>

 

2. How to set out project sass without manually run the command and without configure the sass path or css path?

  • GO to this Page How to starting using Compass.app to compile sass automatically.