I don't really understand what's the purpose of the <<<CSSs and CSS;s in the following code:
$css_var = <<<CSS
/*Techozoic {$tech['ver']}*/
/*Variable Styles*/
#page{
background:{$tech_content_bg_color} url({$tech['content_bg_image']}) {$tech_content_bg_repeat} top left;
}
#header{
background-color:{$tech_content_bg_color};
}
body{
font-family:{$tech['default_font']}, Sans-Serif;
font-size: {$tech['body_font_size']}px;
background:{$tech_bg_color} url({$tech['bg_image']}) {$tech_bg_repeat} top left;
}
.techozoic_font_size{
font-size: {$tech['body_font_size']}px;
}
.narrowcolumn .entry,.widecolumn .entry, .top {
font-family:{$tech['body_font']}, Sans-Serif;
}
{$tech_post_bg_color_classes}{
background-color:{$tech_post_bg_color};
border-top:1px {$tech_acc_color} solid;
}
.top{
border:none;
}
h1{
font-family:{$tech_h1_font}, Sans-Serif;
}
h2{
font-family:{$tech_h2_font}, Sans-Serif;
}
h3{
font-family:{$tech_h3_font}, Sans-Serif;
}
h4{
font-family:{$tech_h4_font}, Sans-Serif;
}
h5{
font-family:{$tech_h5_font}, Sans-Serif;
}
.blog_title{
font-family:{$tech_blog_title_font}, Sans-Serif;
}
.post_title{
font-family:{$tech_post_title_font}, Sans-Serif;
}
.sidebar h2, .sidebar h3, #footer h2{
font-family:{$tech_sidebar_font}, Sans-Serif;
}
.blog_title{
font-size: {$tech['main_heading_font_size']}em;
}
.post_title {
font-size: {$tech['post_heading_font_size']}em;
}
.widgettitle {
font-size: {$tech['side_heading_font_size']}em;
margin: 1px 0;
}
.sidebar h3 {
font-size: {$tech_sidebar_h3_font_size}em;
}
#content {
font-size: {$tech['post_text_font_size']}em;
}
acronym,abbr,span.caps,small,.trackback li,#commentform input,#commentform textarea,.sidebar {
font-size: {$tech['small_font_size']}em;
}
.description, ul#nav a, ul#admin a, #dropdown li.current_page_item a:hover, .menu li.current-menu-item a:hover, #dropdown li.current_page_item ul a, .menu li.current-menu-item ul a, ul#nav li.current_page_item a:hover,.blog_title a,.blog_title a:visited, #nav2 a, #nav2 li.current_page_item a:hover,#subnav a, #subnav a:visited, #dropdown a, #navmenu .menu li a, #navmenu .menu li.current-menu-item a{
color: {$tech_acc_color};
}
.author,#searchform #s, #searchsubmit:hover,#catsubmit:hover,#wp-submit:hover,.postform,#TB_ajaxContent {
background-color: {$tech_acc_color} ;
}
ul#nav li,ul#admin li, #nav2 li, ul#dropdown li, #navmenu .menu li{
background-color: {$tech_nav_bg_color};
}
ul#nav li,ul#admin li, #nav2 li, ul#dropdown li a, #navmenu .menu li a{
font-family:{$tech['nav_font']}, Sans-Serif;
font-size:{$tech['nav_text_font_size']}em;
}
#navmenu .menu ul.sub-menu li{
background-color: {$tech_nav_ul_bg_color};
}
CSS;
if($tech_nav_bg_trans != 'On') {
$css_var .= <<<CSS
ul#nav li.current_page_item,#nav2 li.current_page_item,#nav2 li.current_page_parent,ul#nav2 li.current_page_ancestor,#dropdown li.current_page_item, #navmenu .menu li.current-menu-item {
background-color: {$tech_acc_color} ;
}
ul#nav li:hover,#nav2 li:hover, #nav2 li:active, #dropdown li:hover, #navmenu .menu li:hover {
background:#efefef;
box-shadow:2px -1px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow:2px -1px 3px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:2px -1px 3px rgba(0, 0, 0, 0.3);
}
ul#nav li.current_page_item a ,#nav2 li.current_page_item a,#nav2 li.current_page_parent a, #nav2 li.current_page_ancestor a,#dropdown li.current_page_item a, #navmenu .menu li.current-menu-item a{
color:#f7f7f7;
}
ul#admin li:hover{
background:#efefef;
box-shadow:2px 1px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow:2px 1px 3px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:2px 1px 3px rgba(0, 0, 0, 0.3);
}
CSS;
}
$css_var .= <<<CSS
.post_date {
background-color:{$tech_acc_color};
}
.tags {
border-bottom:1px {$tech_acc_color} solid;
}
#content,h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5{
color:{$tech_text_color};
}
a,h2 a:hover,h3 a:hover,.commentdiv a, .commentdiv a:visited,#user_login,#user_pass,.postform,.commentdiv span, #sidenav a:visited {
color:{$tech_link_color};
text-decoration:none;
}
.date_post,#searchform #s {
color:{$tech_post_bg_color};
text-decoration:none;
}
a:hover,.blog_title a:hover {
color:{$tech_link_hov_color};
text-decoration:underline;
}
a:visited{
color:{$tech_visit_link_color};
}
ul#nav li.current_page_item a:hover, ul#nav2 li.current_page_item a:hover, ul#nav2 li.current_page_parent a:hover {
color:{$tech_acc_color};
}
It is valid code or a bad practice?
